logo标签列表

HTML表格列宽度

htmlcss
4
如何修复底部列？宽度为50％并不起作用。我想让2行和3行底部具有相同的宽度。 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td style="width:50%;">Cell A</td>
    <td style="width:50%;">Cell B</td>
  </tr>
    <tr>
    <td>Cell A</td>
    <td>Cell B</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

我认为你需要修正问题。你把行和列混淆了。行是水平的，而列是垂直的。我认为你的问题应该是：“如何获得2个列标题和每行3列？”这样正确吗？ - Sari Rahal
无法使用简单的HTML表格实现。首先，您必须使用colspan属性将一列跨越多个列，但这仍然不能得到期望的结果。您需要使用嵌套表格或使用带有div的CSS。 - Nawed Khan
3个回答
6
Column 1 and Column 2 Column 3, Column 4 and Column 5
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4 Row 2, Cell 5
表格列之间有联系。如果您放置一些内容以使单元格变宽，整个列都会变宽。
这意味着所有行必须具有相同数量的单元格。但是，您可以使用 "colspan" 属性合并2个或多个单元格。
如果您想在一行上有2列，其他行上有3列，则可能希望设置6个单元格，并在两种情况下使用 "colspan"： 

td {
  border: 1px solid #eee;
  text-align: center;
}
<table style="width: 100%;">
  <tr>
    <td colspan="3" style="width:50%;">Cell A</td>
    <td colspan="3" style="width:50%;">Cell B</td>
  </tr>
  <tr>
    <td colspan="2">Cell A</td>
    <td colspan="2">Cell B</td>
    <td colspan="2">Cell C</td>
  </tr>
</table>

我将它们分成了6列，这样更容易可视化。但实际上，两侧的2列可以合并，因为它们总是一起进行跨列：

td {
  border: 1px solid #eee;
  text-align: center;
}
<table style="width: 100%;">
  <col width="33.3333%">
  <col width="16.6667%">
  <col width="16.6667%">
  <col width="33.3333%">
  <tr>
    <td colspan="2">Cell A</td>
    <td colspan="2">Cell B</td>
  </tr>
  <tr>
    <td>Cell A</td>
    <td colspan="2">Cell B</td>
    <td>Cell C</td>
  </tr>
</table>

1
在第一行第二列使用 colspan='2'。 

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <td style="width:50%;">Cell A</td>
    <td colspan='2' style="width:50%;">Cell B</td>
  </tr>
    <tr>
    <td>Cell A</td>
    <td>Cell B</td>
    <td>Cell B</td>
  </tr>
</table>

</body>
</html>

0

您可以使用colspan告诉浏览器要占用多少列：

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
    }
  </style>
</head>

<body>

  <table width="100%">
    <tr>
      <td>Cell A</td>
      <td colspan="2">Cell B</td>
    </tr>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell B</td>
    </tr>
  </table>

</body>

</html>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接