简单的方案:

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

我需要为<td>设置一个固定宽度。我试过了:

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

Also

td.something {
  width: 90px;
}

for

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

甚至

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

但是<td>的宽度是一样的。


当前回答

这些对我来说都不工作,并且在数据表上有许多cols,使%或sm类等于12个元素布局。

我正在使用Angular 5和Bootstrap 4的数据表,并且在表中有很多col。我的解决方案是在TH中添加一个具有特定宽度的DIV元素。例如,对于cols“Person Name”和“Event date”,我需要一个特定的宽度,然后在col标题中放一个div,整个col宽度然后调整为从TH上的div指定的宽度:

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

其他回答

这些对我来说都不工作,并且在数据表上有许多cols,使%或sm类等于12个元素布局。

我正在使用Angular 5和Bootstrap 4的数据表,并且在表中有很多col。我的解决方案是在TH中添加一个具有特定宽度的DIV元素。例如,对于cols“Person Name”和“Event date”,我需要一个特定的宽度,然后在col标题中放一个div,整个col宽度然后调整为从TH上的div指定的宽度:

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

如果没有页面html或其他CSS的上下文,就很难判断。你的CSS规则不影响td元素可能有无数个原因。

您是否尝试过更具体的CSS选择器,例如

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

这可以避免您的CSS被来自引导CSS的更具体的规则所覆盖。

(顺便说一下,在你的内联CSS样本样式属性,你拼错了宽度-这可以解释为什么尝试失败!)

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

对于引导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>

对于Bootstrap 3.0:

用twitter引导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>

对于Bootstrap 2.0:

与twitter引导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>元素。

好的,我刚刚找出了问题所在-在引导设置为默认值宽度选择元素,因此,解决方案是:

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

其他的都对我没用。