如何自动调整标准表格单元格的大小以适应表格宽度内的标题单元格？答案

【问题标题】：How can I automatically re-size standard table cells to fit header cells within the table's width?如何自动调整标准表格单元格的大小以适应表格宽度内的标题单元格？
【发布时间】：2016-07-25 21:14:21
【问题描述】：

我的代码显示一个表格。每个表格行都以一个标题单元格开始，然后是一个标准单元格。

某些表格行包含一个附加标题单元格，位于标准单元格之后。

如果标准单元格后面有标题单元格，我想自动调整它们的大小。我希望每个表格行都适合表格的宽度边界。

我不希望重新调整标题单元格的大小，只调整标准单元格以适应表格行中的标题单元格。

This is what the table looks like

This is what I want it to look like

只有标准单元格被重新调整大小以适应下面的标题单元格，以匹配表格中其他行的宽度。

<html>

<head>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <style>
        body {
            color: #FFF;
            font-family: 'Open Sans', sans-serif;
            text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
        }

        table {
            border-collapse: collapse;
            font-size: 25px;
            margin: auto;
            width: 500px;
        }

        th,
        td {
            border: 1px solid black;
            height: 50px;
            padding: 5px;
            text-align: center;
        }

        th {
            background-color: #8000FF;
            color: #FFF;
            width: 50px;
        }

        td {
            width: 350px;
        }

        table tr:nth-child(odd) td {
            background-color: #FF8000;
        }

        table tr:nth-child(even) td {
            background-color: #00FF80;
        }
    </style>
</head>

<body>
    <table>
        <tbody>
            <tr>
                <th>18</th>
                <td>LqtgHRqNcW</td>
            </tr>
            <tr>
                <th>91</th>
                <td>BhydHJUADT</td>
            </tr>
            <tr>
                <th>85</th>
                <td>frvFQoRUuC</td>
                <th>5214</th>
            </tr>
            <tr>
                <th>06</th>
                <td>tIfFHLblmN</td>
                <th>8808</th>
            </tr>
            <tr>
                <th>49</th>
                <td>HMPbrfKYcN</td>
            </tr>
            <tr>
                <th>68</th>
                <td>mMxIjEQMgD</td>
            </tr>
            <tr>
                <th>39</th>
                <td>dDFSkkkLww</td>
            </tr>
            <tr>
                <th>57</th>
                <td>vMvOZYyLIB</td>
                <th>3235</th>
            </tr>
            <tr>
                <th>12</th>
                <td>AKWQsKDNpr</td>
            </tr>
            <tr>
                <th>58</th>
                <td>oCNXiRSwOO</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

https://jsfiddle.net/yb1hcy7q/

如何自动调整标准表格单元格的大小以适应表格宽度内的标题单元格？

感谢您阅读我的问题，我将不胜感激。

【问题讨论】：

标签： html css

【解决方案1】：

你需要属性colspanhttps://jsfiddle.net/yb1hcy7q/1/

见：https://www.w3.org/wiki/HTML/Elements/td

body {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
table {
  border-collapse: collapse;
  font-size: 25px;
  margin: auto;
  width: 500px;
}
th,
td {
  border: 1px solid black;
  height: 50px;
  padding: 5px;
  text-align: center;
}
th {
  background-color: #8000FF;
  color: #FFF;
  width: 50px;
}
td {
  width: 350px;
}
table tr:nth-child(odd) td {
  background-color: #FF8000;
}
table tr:nth-child(even) td {
  background-color: #00FF80;
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<table>
  <tbody>
    <tr>
      <th>18</th>
      <td colspan="2">LqtgHRqNcW</td>
    </tr>
    <tr>
      <th>91</th>
      <td colspan="2">BhydHJUADT</td>
    </tr>
    <tr>
      <th>85</th>
      <td>frvFQoRUuC</td>
      <th>5214</th>
    </tr>
    <tr>
      <th>06</th>
      <td>tIfFHLblmN</td>
      <th>8808</th>
    </tr>
    <tr>
      <th>49</th>
      <td colspan="2">HMPbrfKYcN</td>
    </tr>
    <tr>
      <th>68</th>
      <td colspan="2">mMxIjEQMgD</td>
    </tr>
    <tr>
      <th>39</th>
      <td colspan="2">dDFSkkkLww</td>
    </tr>
    <tr>
      <th>57</th>
      <td>vMvOZYyLIB</td>
      <th>3235</th>
    </tr>
    <tr>
      <th>12</th>
      <td colspan="2">AKWQsKDNpr</td>
    </tr>
    <tr>
      <th>58</th>
      <td colspan="2">oCNXiRSwOO</td>
    </tr>
  </tbody>
</table>

使用table-layout 调整每列的大小：使用

 <colgroup>
    <col class="th"/>
    <col />
    <col class="th"/>
 </colgroup>

（演示 https://jsfiddle.net/yb1hcy7q/4/ 或 sn-p 下面）

body {
  color: #FFF;
  font-family: 'Open Sans', sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 25px;
  margin: auto;
  width: 500px;
}

th,
td {
  border: 1px solid black;
  height: 50px;
  padding: 5px;
  text-align: center;
}

th {
  background-color: #8000FF;
  color: #FFF;
}
col {
  
}
col.th {
  width:3em;
}

table tr:nth-child(odd) td {
  background-color: #FF8000;
}

table tr:nth-child(even) td {
  background-color: #00FF80;
}

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

  <table>
    <colgroup>
      <col class="th"/>
      <col />
      <col class="th"/>
    </colgroup>
    <tbody>
      <tr>
        <th>18</th>
        <td colspan="2">LqtgHRqNcW</td>
      </tr>
      <tr>
        <th>91</th>
        <td colspan="2">BhydHJUADT</td>
      </tr>
      <tr>
        <th>85</th>
        <td>frvFQoRUuC</td>
        <th>5214</th>
      </tr>
      <tr>
        <th>06</th>
        <td>tIfFHLblmN</td>
        <th>8808</th>
      </tr>
      <tr>
        <th>49</th>
        <td colspan="2">HMPbrfKYcN</td>
      </tr>
      <tr>
        <th>68</th>
        <td colspan="2">mMxIjEQMgD</td>
      </tr>
      <tr>
        <th>39</th>
        <td colspan="2">dDFSkkkLww</td>
      </tr>
      <tr>
        <th>57</th>
        <td>vMvOZYyLIB</td>
        <th>3235</th>
      </tr>
      <tr>
        <th>12</th>
        <td colspan="2">AKWQsKDNpr</td>
      </tr>
      <tr>
        <th>58</th>
        <td colspan="2">oCNXiRSwOO</td>
      </tr>
    </tbody>
  </table>

【讨论】：

感谢您的帮助！如果我将表格布局更改为固定怎么办？下表标题单元格与标准单元格大小相同。我希望两个标题单元格的宽度都为 25 像素。 jsfiddle.net/yb1hcy7q/3
@Owen 你可以使用 colgroup/col 来调整你的列的大小jsfiddle.net/yb1hcy7q/4 你应该在教程中挖掘如何构建一个表；）
再次感谢您的帮助，我会做一些阅读，所以我不必再问问题了！ :)