Question

我有一个带有标题的表，它占用了它的整个宽度，并且有 colspan =“5”。但是现在我需要在标题上方再添加一行，其中可以有超过5个单元格，例如9,16或更多。如何使这个新行只占用旧表的宽度，但其中有多个单元格？你可以看到下面的问题：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  .foo {＆＃xD;＆＃xA;最小宽度：250px;＆＃xD;＆＃xA; width：auto;＆＃xD;＆＃xA; text-align：center;＆＃xD;＆＃xA;最小高度：30px;＆＃xD;＆＃xA; border：1px solid＃515151;＆＃xD;＆＃xA; border-radius：6px;＆＃xD;＆＃xA; position：absolute;＆＃xD;＆＃xA; padding：0;＆＃xD;＆＃xA;溢出：隐藏;＆＃xD;＆＃xA; text-shadow：1px 1px 1px rgba（0,0,0,0.33）;＆＃xD;＆＃xA; box-shadow：5px 5px rgba（0,0,0,0.1）;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .thClass {＆＃xD;＆ #xA; margin-left：-3px;＆＃xD;＆＃xA; text-align：center;＆＃xD;＆＃xA; box-shadow：0 2px 2px rgba（0,0,0,0.26）;＆＃xD;＆＃xA; -webkit-box-shadow：0 2px 2px rgba（0,0,0,0.26）;＆＃xD;＆＃xA; -moz-box-shadow：0 2px 2px rgba（0,0,0,0.26）;＆＃xD;＆＃xA; margin-top：-2px;＆＃xD;＆＃xA;最小高度：30px;＆＃xD;＆＃xA; line-height：30px;＆＃xD;＆＃xA; font-size：19px;＆＃xD;＆＃xA; cursor：move;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .header {＆＃xD;＆＃xA; margin-left：17px;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .tableBody {＆＃xD;＆＃xA; display：block;＆＃xD;＆＃xA;最小高度：25px;＆＃xD;＆＃xA; text-align：center;＆＃xD;＆＃xA;宽度：102％;＆＃xD;＆＃xA; margin-left：-2px;＆＃xD;＆＃xA; cursor：default;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .foo tbody tr td {＆＃xD;＆＃xA; display：block;＆＃xD;＆＃xA; line-height：25px;＆＃xD;＆＃xA; text-align：center;＆＃xD;＆＃xA; border-bottom：1px solid rgba（0,0,0,0.2）;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; #displaySizes {＆＃xD;＆ #xA; list-style：none;＆＃xD;＆＃xA; padding：0;＆＃xD;＆＃xA; margin-top：0;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .disp tbody tr th {＆＃xD;＆＃xA; column-span：all;＆＃xD;＆＃xA; border：1px solid black;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; .disp tbody tr td {＆＃xD;＆＃xA; display：table-cell;＆＃xD;＆＃xA;}

＆＃xD;＆＃xA;

 < code>＆lt; table class =“foo disp elementTable”＆gt;＆＃xD;＆＃xA; ＆lt; tr colspan =“1”class =“newRow”＆gt;＆＃xD;＆＃xA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; / TR＆GT;＆＃的xD;＆＃XA; ＆lt; tr class =“tableHeader”＆gt;＆＃xD;＆＃xA; ＆lt; th class =“thClass”colspan =“5”＆gt;＆＃xD;＆＃xA; ＆lt; span class =“header”＆gt; Device＆lt; / span＆gt;＆＃xD;＆＃xA; ＆LT; /第＆GT;＆＃的xD;＆＃XA; ＆LT; / TR＆GT;＆＃的xD;＆＃XA; ＆LT; TR＆GT;＆＃的xD;＆＃XA; ＆lt; td rowspan =“4”id =“sizeContainer”＆gt;＆＃xD;＆＃xA; ＆lt; ul id =“displaySizes”＆gt;＆＃xD;＆＃xA; ＆LT;李→4：3'; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT; 16：9＆LT; /立GT;＆＃的xD;＆＃XA; ＆LT;李＆GT;时钟及LT; /立GT;＆＃的xD;＆＃XA; ＆LT; / UL＆GT;＆＃的xD;＆＃XA; ＆LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT; $ 100℃; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; / TR＆GT;＆＃的xD;＆＃XA; ＆LT; TR＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; / TR＆GT;＆＃的xD;＆＃XA; ＆LT; TR＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; / TR＆GT;＆＃的xD;＆＃XA; ＆LT; TR＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; TD＆GT;二月和LT; / TD＆GT;＆＃的xD;＆＃XA; ＆LT; / TR＆GT;＆＃的xD;＆＃XA;＆LT; /表＆gt;

＆＃的xD;＆＃XA;

＆＃xD;＆＃xA;

＆＃xA;＆＃xA;

您可以看到小提琴

＆＃xA;

Answer 1

因为你不知道这个新行会有多少个表格单元格，并且你希望它与下表相匹配（而不是相反）我将行放入嵌套在最顶层的新表中行，给了最顶行一个9999的colspan（这意味着一切都达到了9999）并且对齐了

＆＃13;

.foo {
    min-width: 250px;
    width: auto;
    text-align: center;
    min-height: 30px;
    border: 1px solid #515151;
    border-radius: 6px;
    position: absolute;
    padding: 0;
    overflow: hidden;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
    box-shadow: 5px 5px rgba(0,0,0, 0.1);
}

.thClass {
    margin-left: -3px;
    text-align: center;
    box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
    margin-top: -2px;
    min-height: 30px;
    line-height: 30px;
    font-size: 19px;
    cursor: move;
}

.header{
    margin-left: 17px;
}

.tableBody {
    display: block;
    min-height: 25px;
    text-align: center;
    width: 102%;
    margin-left: -2px;
    cursor: default;
}

.foo tbody tr td {
    display: block;
    line-height: 25px;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

#displaySizes {
    list-style: none;
    padding: 0;
    margin-top: 0;
}

.disp tbody tr th {
    column-span: all;
    border: 1px solid black;
}

.disp tbody tr td {
    display: table-cell;
}

＆＃13;

<table class="foo disp elementTable">
  <tr colspan="1" class="newRow">
     <td colspan='9999999'>
       <table width='100%'>
          <tr>
            <td>February</td>
            <td>February</td>
            <td>February</td>
            <td>February</td>
            <td>February</td>
            <td>February</td>
            <td>February</td>
            <td>February</td>
          </tr>
       </table>
     </td>
  </tr>
  <tr class="tableHeader">
    <th class="thClass" colspan="5">
      <span class="header">Device</span>
    </th>
  </tr>
  <tr>
    <td rowspan="4" id="sizeContainer">
      <ul id="displaySizes">
        <li>4:3</li>
        <li>16:9</li>
        <li>Clock</li>
      </ul>
    </td>
    <td>$100</td>
    <td>February</td>
    <td>February</td>
    <td>February</td>
  </tr>
  <tr>
    <td>February</td>
    <td>February</td>
    <td>February</td>
    <td>February</td>
  </tr>
  <tr>
    <td>February</td>
    <td>February</td>
    <td>February</td>
    <td>February</td>
  </tr>
  <tr>
    <td>February</td>
    <td>February</td>
    <td>February</td>
    <td>February</td>
  </tr>
</table>

＆＃13;

将不同的顶部和底部colspans设置为同一个表行

1 个答案: