Question

我认为我在理解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的长度相同，您可以看到第一个表比第二个表短。我有什么想念的吗？

Answer 1

.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>

试试看！希望对您有帮助

Answer 2

您的列（Poles-0100）中的内容不够长，无法迫使表扩展到超出所需范围。如果您添加更长的字符串，它将扩展到70％。

尝试不使用display:inline-block;

表td虽然已经制作了CSS，但没有相同的行宽吗？

2 个答案: