表格 css 宽度被 colspan 属性破坏答案

【问题标题】：Table css width is broken by colspan attribute表格 css 宽度被 colspan 属性破坏
【发布时间】：2021-07-29 23:44:33
【问题描述】：

当你创建一个表时

table-layout: fixed;

它消耗 100% 的宽度。然后你尝试创建 4 列（10%、10%、40%、40%）

但是，有些行只有 2 列长，所以我们使用 colspan="2"，但这会破坏预定义的宽度值并均匀分布所有内容。

我目前的解决方案是在td 标签中嵌套表格。

有没有更好的方法来做到这一点或阻止colspan 打破我的宽度？

下面是一个简单的 2 列示例：

编辑：代码更新了代码以获得更好的示例。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  table {
    table-layout: fixed;
   }
  </style>    
</head>
<body>
<table style="width: 100%">
  <caption>Table of Contents</caption>
  <tbody>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;" colspan="2">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>2</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>3</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

已更新解决方案

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>  
</head>
<body>
<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="short" />
    <col class="long" />
  </colgroup>
    <tr>
      <td colspan="3">
        <div>Table of Contents</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;" colspan="2">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>2</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>3</div>
      </td>
      <td>
        <div>-</div>
      </td>
      <td>
        <div>Chapter Name</div>
      </td>
    </tr>
</table>
</body>
</html>

CSS

table {
  table-layout: fixed;
}
.short {
  width: 5%;
}
.long {
  width: 90%;  
}

table {
  table-layout: fixed;
}
.short {
  width: 5%;
}
.long {
  width: 90%;  
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>  
</head>
<body>
<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="short" />
    <col class="long" />
  </colgroup>
    <tr>
      <td colspan="3">
        <div>Table of Contents</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;" colspan="2">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>2</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td>
        <div>3</div>
      </td>
      <td>
        <div>-</div>
      </td>
      <td>
        <div>Chapter Name</div>
      </td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用colgroup (original answer here)

html * {
  font-size: 98%;
  color: #000;
  font-family: Arial !important;
}

table {
  table-layout: fixed;
  width: 100%;
}

th,
td {
  padding: 15px;
  word-break: break-all;
  border: 1px solid black;
}

.short {
  width: 5%;
}

.long {
  width: 95%;
}

<table style="width: 100%">
  <colgroup>
    <col class="short" />
    <col class="long" />
  </colgroup>
  <tr>
    <td colspan="2">
      <div style="font-size: 300%;">Table of Contents</div>
    </td>
  </tr>
  <tr>
    <td>
      <div>1</div>
    </td>
    <td>
      <div>2</div>
    </td>
  </tr>
</table>

【讨论】：

【解决方案2】：

您有什么理由不能简单地指定table { width: 100%; } 而不是使用table-layout: fixed; 吗？

html *
{
   font-size: 98%;
   color: #000;
   font-family: Arial !important;
}
table {
   width:100%;
}

th, td {
    padding: 15px;
    word-break: break-all;
    background:#ccc;
}

https://jsfiddle.net/L05v6s8z/

【讨论】：

长词溢出会破坏缩放比例，单独的断词并不能解决它。必须修复布局:(来自这个问题 [link] (stackoverflow.com/questions/35713128/…)

【解决方案3】：

您是否考虑过使用caption tag？

标题元素在语义上定义为表格的标题（这是您尝试做的），并且至少从HTML 3.2 开始可用。它兼容所有浏览器版本，包括 IE6。您可以使用 CSS 对其进行样式设置，以实现您所追求的外观。

html *
{
  font-size: 98%;
  color: #000;
  font-family: Arial !important;
}

table {
  table-layout: fixed;
}

table caption {
  font-size: 300%;
}

th, td {
  padding: 15px;
  word-break: break-all;
}

<table style="width: 100%">
  <caption>Table of Contents</caption>
  <tbody>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;">
        <div>Name</div>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

是的，我有，请参阅上面的更新。目录有章节，然后是章节和子章节。我使用colspan 进行格式化。
谢谢你的帮助队友:)