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

简单的方案:

  <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>的宽度仍然是相同的。

1233692 次浏览
小开

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

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

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

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

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

小开

好的，我刚刚找出了问题所在-在引导设置为select元素的默认值width，因此，解决方案是:

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

其他的都对我没用。

小开

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

此外，如果表的第一行是标题行，则可能需要将宽度添加到th而不是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>

对于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>元素。

小开

我也有同样的问题，我让表固定，然后指定我的td宽度。如果你有，你也可以做这些。

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

模板:

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

请使用CSS来构造任何布局。

小开

在我的情况下，我能够通过使用min-width: 100px而不是width: 100px的单元格th或td来修复这个问题。

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

试试这个——

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

您可以创建一个colgroup，并将类应用到col标记，而不是将col-md-*类应用到行中的每个td。

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

演示# EYZ0

小开

希望这篇文章能帮助到一些人:

<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 < a href = " https://github.com/twbs/bootstrap/issues/863 " > < / >

小开
我已经为这个问题纠结了一段时间了，所以万一有人和我犯同样愚蠢的错误… 在<td>中，我应用了white-space:pre样式的元素。这使得我所有的table/tr/td技巧都被丢弃了。当我删除该样式时，突然我所有的文本都很好地格式化在td.

所以，总是检查主容器(如table或td)，但也总是检查如果你没有取消你的beautifull代码更深的地方:)

小开

这个组合解决方案为我工作，我想要等宽的列

<style type="text/css">


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


table th, table td {
overflow: hidden;
}


</style>

结果:-

enter image description here

小开

使用,而不是道明或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>

小开

引导4.0

在Bootstrap 4.0中，我们必须通过添加类d-flex来声明表行为flex-box，并删除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>
</tbody>
</table>

希望这将有助于其他人在那里!

干杯!

小开

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

这些对我来说都不工作，并且在数据表上有许多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> ...
小开 

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

小开

在Bootstrap 4中使用d-flex代替row表示“tr”

问题是“row”类比父容器占用更大的宽度，这就产生了问题。

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

小开

在启动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 col网格。

小开

在引导表4.x中

如果您在初始化参数中创建表，而不是使用HTML。

你可以在columns属性中指定width参数:

$("table").bootstrapTable({
columns: [
{ field: "title", title: "title", width: "100px" }
]
});
小开

使用固定的表布局CSS在表，并设置一个百分比的td。

小开
Bootstrap 4和5有一个宽度实用程序，用于调整html元素的宽度 例子:< / p > 
<tr class="w-50">
<td class="w-25">A</td>
...
</tr>
小开

对我来说，将表的布局设置为自动，并针对特定列的<th>起到了作用。我发现在任何一行中以<td>为目标也同样有效。如果需要，请随意添加!important。

.table {
table-layout: auto;
}


th {
width: 10%;
}
小开

我也遇到过这个问题，我用这个方法来克服…所以你可以试试

# EYZ0

小开

在我的例子中，我是这样解决的

<style>
td {
min-width: 175px;
}
</style>

因此每个表格单元格的最小宽度为175px。您可以更改该值以使其适合您的目的。

你可以在这里找到更多关于min-width的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/min-width?retiredLocale=de


提交答案