Question

我有三个使用bootstrap类"table table-striped"的cols的表。但我希望第一列的长度为100px，其长度为400px和第三200px。我如何使用自举表格进行此操作？

Answer 1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table class="table table-striped">
    <thead>
      <tr>
        <th  style="width:100px !important;">Firstname</th>
        <th  style="width:400px !important;">Lastname</th>
        <th  style="width:200px !important;">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Answer 2

你可以给它另一个类"table table-width-100 table-striped"

并为table-width-100类提供新宽度，如下所示：

.table-width-100 { width: 100px; !important }

其中！important会覆盖默认的bootstrap css，但可能会有更清晰的解决方案。

Answer 3

您可以简单地将宽度属性设置为表格标题，例如<th style="width: 500px">

Answer 4

我接近这个的方式如下：

将自定义类添加到<table>，例如<table class="table table-striped custom">。这可确保您不会覆盖BootStrap的本机样式。
使用第n个子选择器以编程方式选择所有行中的第1个，第2个和第3个<td>，从而无需为每个<td>添加不同的样式：< / p>

https://jsfiddle.net/gcxfxyx3/

这个特例的CSS是：

    .custom td:nth-child(2) {
      width: 100px;
    }
    .custom td:nth-child(3) {
      width: 400px;
    }
    .custom td:nth-child(4) {
      width: 200px;
    }

如何使用引导程序创建自定义宽度列？

4 个答案: