Sơ đồ đơn giản:

  <tr class="something">
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
  </tr>

Tôi cần phải thiết lập một chiều rộng cố định cho <td>. Tôi đã thử:

tr.something {
  td {
    width: 90px;
  }
}

Cũng thế

td.something {
  width: 90px;
}

cho

<td class="something">B</td>

Và ngay cả

<td style="width: 90px;">B</td>

Nhưng chiều rộng <td>vẫn như cũ.

Đối với Bootstrap 4.0:

Trong Bootstrap 4.0.0, bạn không thể sử dụng các col-*lớp một cách đáng tin cậy (hoạt động trong Firefox, nhưng không phải trong Chrome). Bạn cần sử dụng câu trả lời của OhadR :

<tr>
  <th style="width: 16.66%">Col 1</th>
  <th style="width: 25%">Col 2</th>
  <th style="width: 50%">Col 4</th>
  <th style="width:  8.33%">Col 5</th>
</tr>

Đối với Bootstrap 3.0:

Với twitter bootstrap 3, sử dụng: class="col-md-*"trong đó * là một số cột có chiều rộng.

<tr class="something">
    <td class="col-md-2">A</td>
    <td class="col-md-3">B</td>
    <td class="col-md-6">C</td>
    <td class="col-md-1">D</td>
</tr>

Đối với Bootstrap 2.0:

Với twitter bootstrap 2, sử dụng: class="span*"trong đó * là một số cột có chiều rộng.

<tr class="something">
    <td class="span2">A</td>
    <td class="span3">B</td>
    <td class="span6">C</td>
    <td class="span1">D</td>
</tr>

** Nếu bạn có <th>các phần tử đặt chiều rộng ở đó và không trên các <td>phần tử.

Tôi đã có cùng một vấn đề, tôi đã sửa bảng và sau đó chỉ định chiều rộng td của tôi. Nếu bạn có th bạn có thể làm những điều đó là tốt.

table {
    table-layout: fixed;
    word-wrap: break-word;
}

Bản mẫu:

<td style="width:10%">content</td>

Vui lòng sử dụng CSS để cấu trúc bất kỳ bố cục.

Thay vì áp dụng các col-md-*lớp cho từng tdhàng, bạn có thể tạo colgroupvà áp dụng các lớp cho colthẻ.

    <table class="table table-striped">
        <colgroup>
            <col class="col-md-4">
            <col class="col-md-7">
        </colgroup>
        <tbody>
        <tr>
            <td>Title</td>
            <td>Long Value</td>
        </tr>
        </tbody>
    </table>

Demo tại đây

Hy vọng điều này sẽ giúp được ai đó:

<table class="table">
  <thead>
    <tr>
      <th style="width: 30%">Col 1</th>
      <th style="width: 20%">Col 2</th>
      <th style="width: 10%">Col 3</th>
      <th style="width: 30%">Col 4</th>
      <th style="width: 10%">Col 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val 1</td>
      <td>Val 2</td>
      <td>Val 3</td>
      <td>Val 4</td>
      <td>Val 5</td>
    </tr>
  </tbody>
</table>

https://github.com/twbs/bootstrap/issues/863

Nếu bạn đang sử dụng <table class="table">trên bàn của mình, lớp bảng của Bootstrap sẽ thêm chiều rộng 100% vào bảng. Bạn cần thay đổi chiều rộng thành tự động.

Ngoài ra, nếu hàng đầu tiên trong bảng của bạn là hàng tiêu đề, bạn có thể cần thêm chiều rộng cho th thay vì td.

Trong trường hợp của tôi, tôi đã có thể khắc phục vấn đề đó bằng cách sử dụng min-width: 100pxthay vì width: 100pxcho các ô thhoặc td.

.table td, .table th {
    min-width: 100px;
}

Đối với Bootstrap 4, bạn chỉ cần sử dụng trình trợ giúp lớp:

<table class="table">
  <thead>
    <tr>
      <td class="w-25">Col 1</td>
      <td class="w-25">Col 2</td>
      <td class="w-25">Col 3</td>
      <td class="w-25">Col 4</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      ...

Thử cái này -

<style>
 table { table-layout: fixed; }
 table th, table td { overflow: hidden; }
</style>

Bootstrap 4.0

Trên Bootstrap 4.0, chúng ta phải khai báo các hàng của bảng dưới dạng hộp flex bằng cách thêm lớp d-flex và cũng có thể thả xs, md, hậu tố để cho phép Bootstrap tự động lấy ra từ chế độ xem.

Vì vậy, nó sẽ trông như sau:

<table class="table">
    <thead>
        <tr class="d-flex">
            <th class="col-2"> Student No. </th>
            <th class="col-7"> Description </th>
            <th class="col-3"> Amount </th>
        </tr>
    </thead>

    <tbody>
        <tr class="d-flex">
            <td class="col-2">test</td>
            <td class="col-7">Name here</td>
            <td class="col-3">Amount Here </td>
        </tr>
</table>

Hy vọng điều này sẽ hữu ích cho người khác ngoài kia!

Chúc mừng!

Giải pháp kết hợp này làm việc cho tôi, tôi muốn các cột có chiều rộng bằng nhau

<style type="text/css">

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }

        table th, table td {
            overflow: hidden;
        }

</style>

Kết quả :-

Ok, tôi chỉ cần tìm ra vấn đề ở đâu - trong Bootstrap được thiết lập làm giá trị mặc định widthcho selectphần tử, do đó, giải pháp là:

tr. something {
  td {
    select {
      width: 90px;
    }
  }
}

Bất cứ điều gì khác không làm việc cho tôi.

Khó có thể đánh giá mà không có ngữ cảnh của trang html hoặc phần còn lại của CSS của bạn. Có thể có hàng trăm lý do tại sao quy tắc CSS của bạn không ảnh hưởng đến yếu tố td.

Bạn đã thử các công cụ chọn CSS cụ thể hơn như

tr.somethingontrlevel td.something {
  width: 90px;
}

Điều này để tránh CSS của bạn bị ghi đè bởi một quy tắc cụ thể hơn từ css bootstrap.

(nhân tiện, trong mẫu css nội tuyến của bạn với thuộc tính style, bạn đã viết sai chiều rộng - điều đó có thể giải thích tại sao lần thử đó thất bại!)

Tôi đã phải vật lộn với vấn đề này một thời gian, vì vậy chỉ trong trường hợp khi ai đó phạm phải sai lầm ngu ngốc tương tự như tôi ... Bên trong <td>tôi có yếu tố với white-space:prephong cách được áp dụng. Điều đó làm cho tất cả các thủ thuật bảng / tr / td của tôi bị loại bỏ. Khi tôi xóa kiểu đó, đột nhiên tất cả văn bản của tôi được định dạng độc đáo bên trong td.

Vì vậy, luôn luôn kiểm tra thùng chứa chính (như tablehoặc td) nhưng cũng vậy, luôn luôn kiểm tra xem bạn có hủy mã đẹp của mình ở đâu đó sâu hơn không :)

Sử dụng d-flex thay vì hàng cho "tr" trong Bootstrap 4

Vấn đề là lớp "hàng" chiếm nhiều chiều rộng hơn thùng chứa cha, trong đó đưa ra các vấn đề.

<table class="table">
  <tbody>
    <tr class="d-flex">
      <td class="col-sm-8">Hello</td>
      <td class="col-sm-4">World</td>
    </tr>
    <tr class="d-flex">
      <td class="col-sm-8">8 columns</td>
      <td class="col-sm-4">4 columns</td>
    </tr>
  </tbody>
</table>

Trong bootstarp 4 bạn có thể sử dụng rowvà col-*trong bảng, tôi sử dụng nó như dưới đây

<table class="table">
    <thead>
        <tr class="row">
            <th class="col-sm-3">3 row</th>
            <th class="col-sm-4">4 row</th>
            <th class="col-sm-5">5 row</th>
        </tr>
    </thead>
    <tbody>
        <tr class="row">
            <td class="col-sm-3">some text</td>
            <td class="col-sm-4">some text</td>
            <td class="col-sm-5">some text</td>
        </tr>
    </tbody>
</table>

Đây là cách tôi thường làm khi không phải đối phó với IE

    <tr>
      <th scope="col" style="width: calc(1 * 100% / 12)">#</th>
      <th scope="col" style="width: calc(4 * 100% / 12)">Website</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Username</th>
      <th scope="col" style="width: calc(3 * 100% / 12)">Password</th>
      <th scope="col" style="width: calc(1 * 100% / 12)">Action</th>
    </tr>

Bằng cách đó bạn có thể có một lưới 12 col quen thuộc.

Không có cái nào trong số này hoạt động với tôi và có nhiều cols về khả năng truy cập để tạo lớp% hoặc sm bằng với bố cục 12 phần tử trên bootstrap.

Tôi đã làm việc với các bảng dữ liệu Angular 5 và Bootstrap 4, và có nhiều cols trong bảng. Giải pháp cho tôi là THthêm một DIVphần tử có chiều rộng cụ thể. Ví dụ: đối với cols "Tên người" và "Ngày sự kiện" Tôi cần một chiều rộng cụ thể, sau đó đặt divtiêu đề col, toàn bộ chiều rộng col sau đó thay đổi kích thước theo chiều rộng được chỉ định từ div trên TH:

<table datatable [dtOptions]="dtOptions" *ngIf="listData" class="table table-hover table-sm table-bordered text-center display" width="100%">
    <thead class="thead-dark">
        <tr>
            <th scope="col">ID </th>
            <th scope="col">Value</th>
            <th scope="col"><div style="width: 600px;">Person Name</div></th>
            <th scope="col"><div style="width: 800px;">Event date</div></th> ...

sử dụng .something mà không td hoặc thứ

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  <style>
    .something {
      width: 90px;
      background: red;
    }
  </style>
</head>
<body>

<div class="container">
  <h2>Fixed width column</h2>            
  <table class="table table-bordered">
    <thead>
      <tr>
        <th class="something">Firstname</th>
        <th>Lastname</th>
        <th>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>