Question

使用

创建表格时

table-layout: fixed;

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

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

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

有没有更好的方法来阻止colspan突破我的宽度？

中断的简单2列示例如下：

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

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

Answer 1

这里有一个解决方案：https://stackoverflow.com/a/17832737/4861854

您可以通过创建一个colgroup来解决您的问题：

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

然后你可以像你想要的那样设置类.long和.short：

.short {
  width: 5%;
}
.long {
  width: 95%;  
}

这是小提琴：https://jsfiddle.net/t9qwfs7L/

Answer 2

您是否考虑过使用caption tag？

caption元素在语义上被定义为表的标题（这是你想要做的）并且至少从HTML 3.2开始可用。它兼容所有浏览器版本，包括IE6。您可以使用CSS设置样式以实现外观和效果。感觉你已经过去了。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 3

您有什么理由不能指定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/

表css宽度由colspan属性决定

3 个答案: