爲分隔的連續表應用相同的表列寬度

我試圖讓兩個表看起來像彼此具有相同大小的列。到目前爲止，我已經嘗試給他們一個固定的大小，在bootstrap媒體查詢中進行了更改，但這並沒有很好地發揮作用。爲分隔的連續表應用相同的表列寬度

我也嘗試使用cols，由於某種原因，它們沒有給出相同的列大小。

下面是一個圖像顯示我多麼希望他們看：

HTML標記：

<div class="container-fluid services animated fadeIn"> 
<table class="table services"> 
    <thead> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 
</div>

下面是完整的代碼和例如在JSFiddle

來源

2016-02-23 oreck

加爲第二個表格清空th和td，並使用table-layout:fixed css屬性表格，我們可以達到預期的產出。

檢查fiddle

來源

2016-02-23 19:42:37

這工作就像一個魅力，謝謝。 – oreck

我建議以製備（在這種情況下如圖7所示，其中，6是用於將數據和最後一個持有動作）具有相同數量的列的兩個表。表格中的一行看起來像這樣（爲其他表保留所有其他單元格爲空）：

<tr> 
    <td><a href="#">Klipning</a></td> 
    <td>35 minutter</td> 
    <td>10 minutter</td> 
    <td>Ingen</td> 
    <td>389,- kr.</td> 
    <td>En lækker klipning med alt...</td> 
    <td> 
    <span class="pull-right"> 
     <i class="fa fa-pencil-square-o"></i> 
     <i class="fa fa-times-circle-o"></i> 
    </span> 
    </td> 
</tr>

我已經把行動，一個小區，而單獨的跨度拉他們的權利。

然後應用具體的單元格寬度通過您的自定義CSS（總計達100％）：

.services td { 
    width: 12%; 
} 

.services td:nth-child(6){ 
    width:30%; 
} 

.services td:nth-child(7){ 
    width:10%; 
}

看到http://www.bootply.com/1yK3jiZUkL完整的例子。

來源

2016-02-23 20:18:27

爲分隔的連續表應用相同的表列寬度

回答

相關問題