Question

我得到table table-layout: fixed;，因为我希望所有单元格的宽度都相同，即使是空的，但我找不到一种方法可以使第一个单元更宽，以便文本适合，任何想法如何使这项工作？

HTML

<div class="prTableContainerScroll">
    <table id="squatTable" class="prTable">
        <tr class="prTableHeader">
            <th></th>
            <th></th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>                 
        </tr>
        <tr class="prTableRow">
            <td class="prExerVariNameTD blackColor">Wider to fit</td>
            <td class="prVerticalSpace"></td> <!-- Space --> 
            <td class="prTableCell" title="@finalDate">50</td>
            <td class="prTableCell">60</td>
            <td class="prTableCell"></td>
            <td class="prTableCell">80</td>
            <td class="prTableCell"></td>
        </tr>
        <tr class="prTableRow">
            <td class="prExerVariNameTD blackColor">Wider to fit 1</td>
            <td class="prVerticalSpace"></td> <!-- Space -->
            <td class="prTableCell" title="@finalDate">50</td>
            <td class="prTableCell"></td>
            <td class="prTableCell">70</td>
            <td class="prTableCell">80</td>
            <td class="prTableCell"></td>
        </tr>
    </table>
</div>

CSS

.prTableContainerScroll {
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
}

.prTable {
    table-layout:fixed;
    width: 400px;
}

.prTableCell {
  padding: 7px;
  width: 60px;
  text-align: center;
  border: 1px solid #e1e1e1;
  cursor: default;
}

.prExerVariNameTD {
  border: 1px solid #e1e1e1!important;
  padding: 5px 5px 5px 10px;
  background-color: white;
}

Answer 1

您可以使用colspan表示该列应采用x列的宽度：

＆＃13;

.prTableContainerScroll {
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
}

.prTable {
    table-layout:fixed;
    width: 400px;
}

.prTableCell {
  padding: 7px;
  width: 60px;
  text-align: center;
  border: 1px solid #e1e1e1;
  cursor: default;
}

.prExerVariNameTD {
  border: 1px solid #e1e1e1!important;
  padding: 5px 5px 5px 10px;
  background-color: white;
}



// Just color stuff. 
.prTableCell:nth-child(even) {
  background-color: #eeeeee;
}

.prTableCell:nth-child(odd) {
  background-color: white;
}

.prTableRow:hover .prTableCell:nth-child(even) {
  background-color: #e1e1e1;
}

.prTableRow:hover .prTableCell:nth-child(odd) {
  background-color: #f9f9f9;
}

＆＃13;

<div class="prTableContainerScroll">
<table id="squatTable" class="prTable">
  <tr class="prTableHeader">
    <th colspan="4"></th>
    <th></th>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>                 
  </tr>
  <tr class="prTableRow">
    <td colspan="4" class="prExerVariNameTD blackColor">Wider to fit</td>
    <td class="prVerticalSpace"></td> <!-- Space --> 
    <td class="prTableCell" title="@finalDate">50</td>
    <td class="prTableCell">60</td>
    <td class="prTableCell"></td>
    <td class="prTableCell">80</td>
    <td class="prTableCell"></td>
  </tr>
  <tr class="prTableRow">
    <td colspan="4" class="prExerVariNameTD blackColor">Wider to fit 1</td>
    <td class="prVerticalSpace"></td> <!-- Space -->
    <td class="prTableCell" title="@finalDate">50</td>
    <td class="prTableCell"></td>
    <td class="prTableCell">70</td>
    <td class="prTableCell">80</td>
    <td class="prTableCell"></td>
  </tr>
</table>
</div>

＆＃13;

Answer 2

尝试使用colspan，或者你必须增加表格宽度，或者你必须减少verticalSpcaes Cell的wodth。

Answer 3

如果您想增加第一列的宽度并保持其余大小相同，只需给第一个th或第一个td宽度：

#squatTable td:first-child {
     width: 100px;
}

或，如果您希望所有列具有相同的大小（包括第一列），并且您希望文本在下一行（如果太长），则只需删除此行：

.prTableContainerScroll {
    width: auto;
    overflow-x: auto;
    /*white-space: nowrap; <<<< comment out this line */
}

第一个单元格宽于其余单元格的表

3 个答案: