最初のセルの幅が広い表

Question

tableはですが空でもすべてのセルが同じ幅になるようにしたいので最初のセルを広くしてテキストが収まるようにしますどのようにこの作品を作るためのアイデア？

Fiddle Demo

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

あなたは、その列がx列の幅を取るべきであると言ってcolspanを使用することができます。

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

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

Answer 2

はCOLSPANで試してみてください、またはあなたがテーブルの幅を大きくする必要がある、またはuはverticalSpcaesセルのwodthを小さくする必要があります。

Answer 3

あなたは、最初の列の幅を大きくし、残りの同じサイズを維持、単に最初thまたは最初td一部の幅を与えたい場合は：あなたはすべての列にしたい場合は、

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

または同じサイズ（最初の列を含む）があり、長すぎる場合は次の行に移動するには、単に次の行を削除してください：

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