Таблица td не имеет одинаковой ширины строки, хотя уже делает css?

Я думаю, что у меня все еще есть проблемы с пониманием таблицы html5. Итак, моя проблема очень проста, у меня много таблиц, и я делаю их встроенными блоками.

table.cihuy {
    padding: 6px;
    display: inline-block;
    border-collapse: collapse;
	width:300px;
	table-layout:fixed;
}

table.cihuy td {
    border: 1px solid #000;
    padding: 4px;
	height: 45px;
	font-size:12px;
	vertical-align:top; 
}

td.left {
  width:70%;
}

<table id = "cetak0" class = "cihuy"><tr><td>Komputer</td><td class = "left">Poles-0100</td></tr><tr><td>MAC</td><td class = "left"></td></tr><tr><td>Processor</td><td class = "left"></td></tr><tr><td>Mainboard</td><td class = "left"></td></tr><tr><td>VGA</td><td class = "left"></td></tr><tr><td>Memory</td><td class = "left"></td></tr><tr><td>Hardisk</td><td class = "left"></td></tr><tr><td>Key/Mouse</td><td class = "left"></td></tr></table>

<table id = "cetak1" class = "cihuy"><tr><td>Komputer</td><td class = "left">RND-2D-01</td></tr><tr><td>MAC</td><td class = "left"></td></tr><tr><td>Processor</td><td class = "left">Intel Premium E5800 @ 3.20Ghz</td></tr><tr><td>Mainboard</td><td class = "left">ASUSTeK P5KPL-AM SE (Socket 775)</td></tr><tr><td>VGA</td><td class = "left">Intel G33/G31 Express Chipset Family</td></tr><tr><td>Memory</td><td class = "left">DDR2 1024 Mbytes</td></tr><tr><td>Hardisk</td><td class = "left">1 TB</td></tr><tr><td>Key/Mouse</td><td class = "left">Logitech</td></tr></table>

Я уже делаю css .left и делаю ширину 70% от таблицы, в то время как таблица css имеет ширину 300px. Что я смутил, так это... все td имеют одинаковую длину, вы можете видеть, что первая таблица короче, чем вторая. Есть ли что-нибудь, что я пропускаю?

html css html-table

09.07.2019 02:59

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Содержимое в вашем столбце (Poles-0100) недостаточно длинное, чтобы заставить таблицу расширяться дальше, чем нужно. Если вы добавите более длинную строку, она расширится до 70%.

Попробуйте без display:inline-block;

09.07.2019 04:52

Ответ принят как подходящий

.container {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  grid-column-gap: 30px;
}

table.cihuy {
  padding: 6px;
  border-collapse: collapse;
  width:300px;
  table-layout:fixed;
  margin-bottom: 20px;
}

table.cihuy td {
  border: 1px solid #000;
  padding: 4px;
  height: 45px;
  font-size:12px;
  vertical-align:top; 
}

td.left {
  width:70%;
}

@media only screen and (max-width:600px) {
  .container {
    grid-template-columns: auto;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class = "container">
    <table id = "cetak0" class = "cihuy"><tr><td>Komputer</td><td class = "left">Poles-0100</td></tr><tr><td>MAC</td><td class = "left"></td></tr><tr><td>Processor</td><td class = "left"></td></tr><tr><td>Mainboard</td><td class = "left"></td></tr><tr><td>VGA</td><td class = "left"></td></tr><tr><td>Memory</td><td class = "left"></td></tr><tr><td>Hardisk</td><td class = "left"></td></tr><tr><td>Key/Mouse</td><td class = "left"></td></tr></table>
    <table id = "cetak1" class = "cihuy"><tr><td>Komputer</td><td class = "left">RND-2D-01</td></tr><tr><td>MAC</td><td class = "left"></td></tr><tr><td>Processor</td><td class = "left">Intel Premium E5800 @ 3.20Ghz</td></tr><tr><td>Mainboard</td><td class = "left">ASUSTeK P5KPL-AM SE (Socket 775)</td></tr><tr><td>VGA</td><td class = "left">Intel G33/G31 Express Chipset Family</td></tr><tr><td>Memory</td><td class = "left">DDR2 1024 Mbytes</td></tr><tr><td>Hardisk</td><td class = "left">1 TB</td></tr><tr><td>Key/Mouse</td><td class = "left">Logitech</td></tr></table>
</div>
</body>
</html>

Попробуйте это! Надеюсь, это поможет

есть ли решение сделать таблицу встроенной?

— 09.07.2019 08:07

Проверьте сейчас, я обновил и сделал таблицы встроенными

— 09.07.2019 09:35

09.07.2019 08:03