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

时间：2016-04-05 18:50:06

标签： html css

我的代码显示一个表格。每个表行以标题单元格开头，后跟标准单元格。

某些表行包含一个跟在标准单元格之后的附加标题单元格。

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

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

Pen

This is what the table looks 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>

This is what I want it to look like

如何自动重新调整标准表格单元格的大小以使表格宽度符合标题单元格？

感谢您阅读我的问题，我感谢所有帮助。

1 个答案:

答案 0 :(得分：1)

您需要属性colspan https://jsfiddle.net/yb1hcy7q/1/

  

请参阅：https://www.w3.org/wiki/HTML/Elements/td

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

（演示https://jsfiddle.net/yb1hcy7q/4/或下面的代码段）

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题