如何使一個表的身體佔據較少的寬度比表

Question

基本的頭我試圖做到的是這種表的

https://cloudup.com/cj0w8auGPPT

我想的頭表佔據100％，表的其餘部分佔據比方說95％

我歡迎任何的辦法，

非常感謝。

Answer 1

通過在實際表格的左側和右側添加一個空列，可以使頭部錯覺爲100％，其餘爲95％。

否則，標記您的表格元素，然後使用width: 100%;和width: 95%;在CSS中調整它們各自的寬度將根據更多的努力進行相同的操作。 注意：頭部需要與表格其餘部分分開。

Answer 2

一種方法是使用嵌套表格，第一個表格包含標題，第二個表格包含數據行。 這裏是一個小提琴：https://fiddle.jshell.net/why9n859/
它可能需要一些修改，以完美對齊，但它應該爲此目的。

HTML：

<table id="t1"> 
    <thead> 
     <tr> 
      <th id="left">#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      ... 
     </tr> 
    </thead> 

    <tbody> 
    <div> 
    <table id="t2" style="width: 60%; margin-left: 2.75%;"> 

    <tbody> 
     <tr> 
      <td>1</td> 
      <td>Some</td> 
      <td>Stu</td> 
      ... 
     </tr> 
    </tbody> 
     </table> 
     </div> 
    </tbody> 
</table> 

CSS：

thead { background-color: #09d; color: white; } 
tbody { 
    border: 1px solid #ccc; 
} 
th { padding-right: 10px; padding-left: 10px; } 
td { padding-right: 10px; padding-left: 10px; } 
#left { padding-left: 40px; } 
#right { padding-right: 40px; } 

另一種方法是創建一個表，用於與空標題行中的數據。在表格上方，創建一個以容納實際列標題。您可以使用Bootstrap創建一個包含列的行。 Bootstrap使用12列網格，因此請務必將所有列標題的大小加起來爲12。然後將自定義標題行的背景顏色設置爲所需的任意值，並使表格寬度小於視圖的100％。這裏是關於CSS一個體面的教程「寬度」屬性：http://www.impressivewebs.com/width-100-percent-css/

引導2.3.2語法：

<div class="container-fluid"> 
    <div class="row"> 
     <div class="span4"></div> 
     <div class="span4"></div> 
     <div class="span4"></div> 
    </div> 
</div> 

斯圖尼科爾斯有嵌套表格的一個很好的演示，你可以與他們無關 - 例如標題行可以在主體滾動時鎖定。
http://www.cssplay.co.uk/menu/tablescroll.html

Answer 3

最簡單的解決方案就是添加一個空的左右列，並指定所需的偏移寬度。

http://jsfiddle.net/133L67Lx/

HTML

<table> 
    <thead> 
     <tr> 
      <td></td> 
      <th>#</th> 
      <th>Date</th> 
      <th>Name</th> 
      <th>Email</th> 
      <td></td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>1</td> 
      <td>02/08/15</td> 
      <td>Vivian Voppnrueden</td> 
      <td>savion_beahan@goldnerolson.org</td> 
      <td></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td>2</td> 
      <td>02/08/15</td> 
      <td>Hattie Bashirian</td> 
      <td>nash_weigand@torphy.name</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 

CSS

table{ 
    width:100%; 
    border-collapse:collapse;  
} 

thead tr{ 
    background-color: darkturquoise; 
    color: #FFF; 
} 

tbody td{ 
    border-bottom: 1px solid #EEE; 
    padding: 5px; 
} 

td, 
th{ 
    text-align: left; 
} 

th:nth-child(2), 
td:nth-child(2){ 
    text-align: center; 
    padding-left: 0; 
} 

th:last-child, 
td:last-child{ 
    padding-left: 0; 
} 

td:first-child, 
th:first-child, 
td:last-child, 
th:last-child{ 
    width: 5%; 
    border-bottom: none; 
}