간단한 계획 :

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

에 대해 고정 너비를 설정해야합니다 <td>. 난 노력 했어:

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

또한

td.something {
  width: 90px;
}

...에 대한

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

그리고 심지어

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

그러나 너비 <td>는 여전히 동일합니다.

부트 스트랩 4.0의 경우 :

Bootstrap 4.0.0에서는 col-*클래스를 안정적으로 사용할 수 없습니다 (Firefox에서는 작동하지만 Chrome에서는 작동하지 않음). 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>

부트 스트랩 3.0의 경우 :

트위터 부트 스트랩 3에서 다음을 사용하십시오. class="col-md-*"여기서 *는 여러 열의 열입니다.

<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>

부트 스트랩 2.0의 경우 :

트위터 부트 스트랩 2를 사용하면 : class="span*"*는 여러 열의 열입니다.

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

** <th>요소 가있는 경우 요소가 아닌 너비를 설정하십시오 <td>.

나는 같은 문제가 있었고 테이블을 수정 한 다음 내 td 너비를 지정했다. 당신이 일을하면 당신도 할 수 있습니다.

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

주형:

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

레이아웃을 구성 할 때는 CSS를 사용하십시오.

col-md-*각 td행에 클래스를 적용하는 대신 클래스를 생성 colgroup하고 col태그에 적용 할 수 있습니다 .

    <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>

여기 데모

잘하면이 사람이 도움이 될 것입니다 :

<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

당신이 사용하는 경우 <table class="table">테이블에서 하는 Bootstrap의 테이블 클래스는 테이블에 너비를 100 % 추가합니다. 너비를 자동으로 변경해야합니다.

또한 테이블의 첫 번째 행이 머리글 행인 경우 td가 아니라 th에 너비를 추가해야 할 수도 있습니다.

필자의 경우 셀 min-width: 100px대신 또는 width: 100px을 사용하여 해당 문제를 해결할 수있었습니다 .thtd

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

Bootstrap 4의 경우 클래스 도우미를 사용하면됩니다.

<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>
      ...

이 시도 -

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

부트 스트랩 4.0

Bootstrap 4.0에서는 d-flex 클래스를 추가하여 테이블 행을 flex-boxes로 선언하고 xs, md, 접미사를 삭제하여 Bootstrap이 뷰포트에서 자동으로 파생되도록합니다.

따라서 다음과 같이 보입니다.

<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>

이것이 다른 누군가에게 도움이되기를 바랍니다!

건배!

이 결합 된 솔루션은 나를 위해 일했습니다. 동일한 너비의 열을 원했습니다.

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

결과 :-

좋아, 방금 문제가 어디 있는지 알아 냈습니다. 부트 스트랩 width에서 select요소 의 기본값으로 설정되어 있으므로 해결책은 다음과 같습니다.

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

다른 것은 저에게 효과적이지 않습니다.

페이지 html이나 나머지 CSS의 맥락없이 판단하기가 어렵습니다. CSS 규칙이 td 요소에 영향을 미치지 않는 심각한 이유가있을 수 있습니다.

보다 구체적인 CSS 선택기를 사용해 보셨습니까?

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

이것은 부트 스트랩 CSS의보다 구체적인 규칙으로 CSS를 무시하지 않도록합니다.

(그러나 스타일 속성이있는 인라인 CSS 샘플에서 철자가 틀린 경우-시도가 실패한 이유를 설명 할 수 있습니다!)

나는 잠시 동안이 문제로 고투 해 왔기 때문에 누군가가 나와 같은 바보 같은 실수를 저지른 경우를 대비하여 ... 내부에는 스타일이 적용된 <td>요소가 white-space:pre있습니다. 모든 테이블 / tr / td 트릭을 버렸습니다. 해당 스타일을 제거하면 갑자기 모든 텍스트의 형식이 td.

따라서 항상 메인 컨테이너를 확인 table하거나 (예 : 또는 td), beautifull 코드를 취소하지 않는지 항상 확인하십시오 :)

부트 스트랩 4에서 "tr"에 행 대신 d-flex를 사용하십시오.

문제는 "행"클래스가 부모 컨테이너보다 더 넓은 너비를 차지한다는 것입니다.

<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>

bootstarp 4에서는 사용할 수 row있고 col-*표에서 다음과 같이 사용합니다

<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>

이것은 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>

그렇게하면 친숙한 12 콜 그리드를 가질 수 있습니다.

이 중 어느 것도 나를 위해 작동하지 않으며 부트 스트랩에서 % 또는 sm 클래스를 12 요소 레이아웃과 동일하게 만들기 위해 데이터 테이블에 많은 열이 있습니다.

Angular 5 및 Bootstrap 4 데이터 테이블로 작업하고 있었고 테이블에 많은 열이 있습니다. 나를위한 해결책 은 특정 너비 TH의 DIV요소 를 추가하는 것 입니다. 예를 들어 cols "Person Name"및 "Event date"의 경우 특정 너비가 필요합니다. 그런 다음 divcol 헤더 에 a를 넣고 전체 col 너비는 다음의 div에서 지정된 너비로 조정됩니다 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> ...

td 또는 th 없이 .something 사용

<!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>