如何为<td>设置固定宽度?


513

简单方案:

  <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>仍然相同。


1
我只是尝试了一下,而且效果很好-也许问题有所不同。Firebug告诉您有关该元素的什么信息?
Rockbot

在这个网站上,男人正在用视频讲述这个话题。很清楚
egemen

用于style="width: 1% !important;"使宽度与列中的最长单词一样紧,这对于第一个ID /#列很有用。在Chrome(台式机和移动设备),歌剧(台式机),IE(台式机),edge(台式机),firefox(台式机)中进行了测试
vinsa

Answers:


1083

对于Bootstrap 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 bootstrap 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 bootstrap 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>


79
如果您有超过12列会怎样?
2014年

33
您只能在每个<th>标记的<head>中应用此选项,并且所有行都将匹配
Diego Fernando Murillo Valenci 2015年

7
Bootstrap网站上有关于此的文档吗?
路易斯·佩雷斯

26
这可以工作,但是它不在引导站点上,因为这些col- *类不是要以这种方式使用的。它们应在响应式引导网格中使用。如果您喜欢这些功能,请考虑查看它们的CSS并将其复制以制作自己的CSS。
DustinA 2015年

1
另外,除了为到达行设置类之外,我们只需为标题<th>设置一次即可,其余的将自动处理!
dopplesoldner 2015年

133

我遇到了同样的问题,我将表固定了,然后指定了td宽度。如果您有,也可以做。

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

模板:

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

请使用CSS构造任何布局。



这是伟大的,但作为一个另外使用classtd标签,而不是直接应用样式
拉美西斯

1
这样做的效果要 好得多,恰好足以增加thlike 的宽度:<th style="width: 25%;"></th>这将影响其他列的宽度
shaijut

谢谢!我已经为Bootstrap 3设置了col-md-x类,但是没有用。将表布局设置为“固定”可解决我的问题。
maurisrx

这可行。关键是table-layout: fixed。这是必需的,因为许多用BS4构建的模板都将flex应用于所有内容,包括表格。
伊万

73

除了可以将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>

在这里演示


1
我更喜欢这种做法,但似乎对我的情况没有影响,列宽不能按col-md- *进行扩展
Osify

顺便说一句,我喜欢这种解决方案,为什么有人被迫使用col-md- *类而不是col-lg- *,col-sm- *或col-xs- *?
LucioB '16

1
@LucioB可以使用任何内容,甚至可以按列使用其中的几个(例如<col class="col-md-4 col-sm-6">,中等屏幕尺寸的宽度为33%,小屏幕尺寸的宽度为50%)
VDarricau

1
Colgroup在Chrome中不起作用。(Bootstrap v4.1)。为了使浏览器之间保持一致,请对<td>元素使用%width。
AnkitK '18年

57

希望这可以帮助某人:

<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


1
使用最简单的答案
GavinBelson

54

如果<table class="table">在表上使用,Bootstrap的表类将为表添加100%的宽度。您需要将宽度更改为自动。

另外,如果表的第一行是标题行,则可能需要将宽度添加到th而不是td。


1
作为Bootstrap 3的一项附加功能,您还需要将的空白属性设置th为normal,因为该属性当前不被使用,因为此类标头不会损坏。
2014年

41

就我而言,我能够通过使用min-width: 100px而不是width: 100px单元格th或来解决此问题td

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

13
这可能保留了我的理智。
乔尔

是! 这样就为响应表中的列设置了最小宽度。谢谢。
O. Jones

1
这比回答的问题效果更好,谢谢!
以色列

38

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

5
这适合我的用例。谢谢!
tonny

16
重要的是要注意,唯一的w- *选项是:.w-25, .w-50, .w-75, .w-100, .w-auto因此,例如,如果您需要其他选项,w-10则需要将其添加.w-10 { width: 10% !important; }到本地化的CSS文件中。
阿贝拉


9

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

希望这对外面的人有帮助!

干杯!


7

这个组合的解决方案对我有用,我想要等宽的列

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

结果:-

在此处输入图片说明


3

好的,我刚发现问题出在哪里-在Bootstrap中将它设置widthselectelement 的默认值,因此,解决方案是:

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

还有什么对我没有帮助。


2

没有页面html或CSS其余部分的上下文很难判断。CSS规则不影响td元素的原因可能不胜枚举。

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

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

这样可以避免引导CSS中更具体的规则覆盖CSS。

(顺便说一下,在具有style属性的内联css示例中,宽度拼写错误-这可以解释为什么尝试失败的原因!)


2

我已经为这个问题苦苦挣扎了一段时间,以防万一有人犯了和我一样的愚蠢错误……在内部,<td>white-space:pre应用了具有样式的元素。那使我所有的表/ tr / td技巧都被丢弃了。当我删除该样式后,突然我的所有文本都被很好地格式化了td

因此,请始终检查主容器(例如tabletd),而且还要始终检查是否不取消更深处的代码:)


1

在Bootstrap 4中使用d-flex代替“ tr”的行

问题是,“行”类比父容器占用更多的宽度,这会带来问题。

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


我的意思是“行”而不是“ tr”。由于行类的两端都带有装订线。或者,如果您不想使用“ row”类,只需添加“ no-gutters”类。
Usman Anwar

1

在bootstarp 4中,您可以使用rowcol-*在表中,我将其使用如下

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

1

当我不必处理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列网格。


0

这些对我都不起作用,并且在数据表上有很多cols可以使%或sm类等于bootstrap上的12个元素。

我正在使用数据表Angular 5和Bootstrap 4,并且表中有许多列。对我来说,解决方案是TH添加DIV具有特定宽度的元素。例如,对于cols“人名”和“活动日期”,我需要一个特定的宽度,然后div在col标头中放置一个,然后将整个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> ...

-1

使用.something没有TD

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


-2

<div class="row" id="divcashgap" style="display:none">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-default" id="gvcashgapp">
                            <thead>
                                <tr>
                                    <th class="1">BranchCode</th>
                                    <th class="2"><a>TC</a></th>
                                    <th class="3">VourNo</th>
                                    <th class="4"  style="min-width:120px;">VourDate</th>
                                    <th class="5" style="min-width:120px;">RCPT Date</th>
                                    <th class="6">RCPT No</th>
                                    <th class="7"><a>PIS No</a></th>
                                    <th class="8" style="min-width:160px;">RCPT Ammount</th>
                                    <th class="9">Agging</th>
                                    <th class="10" style="min-width:160px;">DesPosition Days</th>
                                    <th class="11" style="min-width:150px;">Bank Credit Date</th>
                                    <th class="12">Comments</th>
                                    <th class="13" style="min-width:150px;">BAC Comment</th>
                                    <th class="14">BAC Ramark</th>
                                    <th class="15" style="min-width:150px;">RAC Comment</th>
                                    <th class="16">RAC Ramark</th>
                                    <th class="17" style="min-width:120px;">Update Status</th>
                                </tr>
                            </thead>
                            <tbody id="tbdCashGapp"></tbody>
                        </table>
                    </div>
                </div>
            </div>


也添加一些解释。
Akash Dubey

这个答案充其量是令人困惑的。类是奇怪的,非必需的ID,没有解释。
GotBatteries
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.