CSS Bootstrap表

如何限制寬度到引導表的每一列？我試着玩，但我似乎不能縮小列。CSS Bootstrap表

https://plnkr.co/edit/XhwIUynVgAxMBpJo8x8N?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <h2>Table</h2> 
     <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p> 
     <table class="table"> 
     <thead> 
      <tr> 
      <th>#</th> 
      <th style="width:20px">Firstname</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
      <td>1</td> 
      <td>Anna</td> 
      </tr> 
      <tr> 
      <td>2</td> 
      <td>Debbie</td> 
      </tr> 
      <tr> 
      <td>3</td> 
      <td>John</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </body> 

</html>

來源

2016-02-17 Zanko

你的表就設置成'寬度：auto'或給它自己的喜好的一個固定的寬度，如'寬度：200px' – Chris

事情是我想追加列，所以我不想限制表的大小:(我正在做ng-repeat的angularJS來追加基於數據庫中的條目數的列。所以我希望每一列的大小都是固定的 – Zanko

你真的想添加'columns'嗎？不是'行'？ – Chris

您可以設置table-layout: fixed，有你列的靜態寬度。

.table { 
    table-layout:fixed; 
} 

td, th { 
    width: 90px; 
}

Demo

.table { 
 
    table-layout:fixed; 
 
} 
 

 
td, th { 
 
    width: 90px; 
 
    border: 1px solid black; 
 
    text-align: left; 
 
}

<table class="table"> 
 
     <thead> 
 
      <tr> 
 
      <th>#</th> 
 
      <th>Firstname</th> 
 
      <th>Lastname</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>1</td> 
 
      <td>Anna</td> 
 
      <td>Lastname</td> 
 
      </tr> 
 
      <tr> 
 
      <td>2</td> 
 
      <td>Debbie</td> 
 
      <td>Lastname</td> 
 
      </tr> 
 
      <tr> 
 
      <td>3</td> 
 
      <td>John</td> 
 
      <td>Lastname</td> 
 
      </tr> 
 
     </tbody> 
 
     </table>

來源

2016-02-17 23:06:13 Chris

您也可以使用< COLGROUP>標籤來每列格式化表格

DEMO

<table class="table"> 
    <colgroup> 
    <col style = "width : 50px"> 
    <col style = "width : 300px"> 
    <col style = "width : 100px"> 
    </colgroup> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th>Firstname</th> 
     <th>Lastname</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>1</td> 
     <td>Anna</td> 
     <td>Lastname</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Debbie</td> 
     <td>Lastname</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>John</td> 
     <td>Lastname</td> 
    </tr> 
    </tbody> 
</table>

不要忘記調整你列在你的CSS

td, th { 

    text-align: left; 
}

來源

2016-02-18 14:18:50

-1

table.tablesorter thead tr th, table.tablesorter tfoot tr th { 
    background-color: #337ab7 !important; 
    border: 0 solid #fff !important; 
    color: #fff !important; 
    font-size: 9pt; 
    font-weight: bold !important; 
    padding: 4px !important; 
    text-align: left; 
    vertical-align: middle !important; 
    width: 2% !important; 
} 
    table thead th { 
     background-color: #006b99; 
     color: white; 
    }

來源

2018-01-17 11:56:02 Arasu

CSS Bootstrap表

回答

相關問題