引导-如何设置的固定宽度?[英]Bootstrap - how to set up fixed width for ? 本文翻译自  user984621  查看原文  2013-02-27  593661    css/

Simple scheme:

简单的方案:

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

I need to set up a fixed width for <td>. I've tried:

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

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

Also

也

td.something {
  width: 90px;
}

for

为

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

And even

甚至

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

But the width of <td> is still the same.

但是的宽度仍然是一样的。

14 个解决方案

#1

For Bootstrap 4.0:

In Bootstrap 4.0.0 you cannot use the col-* classes reliably (works in Firefox, but not in Chrome). You need to use OhadR's answer:

在Bootstrap 4.0.0中，不能可靠地使用col-*类(在Firefox中工作，但在Chrome中不能)。你需要使用奥哈德的回答:

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

For Bootstrap 3.0:

With twitter bootstrap 3 use: class="col-md-*" where * is a number of columns of width.

使用twitter bootstrap 3: class=" coll -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>

For Bootstrap 2.0:

With twitter bootstrap 2 use: class="span*" where * is a number of columns of width.

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

** If you have <th> elements set the width there and not on the <td> elements.

**如果您有元素，请在那里设置宽度，而不是在元素上。

#2

I was having the same issue, I made the table fixed and then specified my td width. If you have th you can do those as well.

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

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

Template:

模板:

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

Please use CSS for structuring any layouts.

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

#3

Instead of applying the col-md-* classes to each td in the row you can create a colgroup and apply the classes to the col tag.

您可以创建colgroup并将类应用到col标记，而不是将colm -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>

Demo here

演示

#4

If you're using <table class="table"> on your table, Bootstrap's table class adds a width of 100% to the table. You need to change the width to auto.

如果您在表上使用

，那么Bootstrap的表类将为表增加100%的宽度。您需要将宽度更改为auto。

Also, if the first row of your table is a header row, you might need to add the width to th rather than td.

此外，如果表的第一行是头行，则可能需要将宽度添加到th而不是td。

#5

In my case I was able to fix that issue by using min-width: 100px instead of width: 100px for the cells th or td.

在我的例子中，我可以通过使用minwidth: 100px而不是宽度:100px来解决这个问题。

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

#6

Hopefully this one will help someone:

希望这个能帮助一些人:

<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

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

#7

Try this -

试试这个,

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

#8

This combined solution worked for me, I wanted equal width columns

这个组合的解对我有用，我想要等宽的列

<style type="text/css">

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

        table th, table td {
            overflow: hidden;
        }

</style>

Result :-

结果:-

#9

For Bootstrap 4, you can simply use the class helper:

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

#10

Hard to judge without the context of the page html or the rest of your CSS. There might be a zillion reasons why your CSS rule is not affecting the td element.

没有页面html或CSS的上下文很难判断。为什么CSS规则不会影响到td元素呢?

Have you tried more specific CSS selectors such as

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

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

This to avoid your CSS being overridden by a more specific rule from the bootstrap css.

这可以避免您的CSS被引导CSS中更特定的规则所覆盖。

(by the way, in your inline css sample with the style attribute, you misspelled width - that could explain why that try failed!)

(顺便说一下，在带有style属性的内联css示例中，您的宽度拼错了——这可以解释为什么尝试失败了!)

#11

Ok, I just figured out where was the problem - in Bootstrap is set up as a default value width for select element, thus, the solution is:

好的，我刚刚发现问题出在哪里了——在Bootstrap中设置为select元素的默认值宽度，因此，解决方案是:

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

Anything else doesn't work me.

其他的都不适合我。

#12

I've been struggling with the issue for a while, so just in case when someone makes the same stupid mistake as me... Inside the <td> I had the element with white-space:pre style applied. That made all my table/tr/td tricks discarded. When I removed that style, suddenly all my text was nicely formatted inside the td.

我已经和这个问题纠结了一段时间，所以当有人和我犯同样愚蠢的错误时……在中，我使用了空白的元素:pre样式应用。这使我所有的表/tr/td技巧都被抛弃了。当我删除那个样式时，突然间我所有的文本都被很好地格式化在td中。

So, always check the main container (like table or td) but also, always check if you don't cancel your beautifull code somewhere deeper :)

因此，一定要检查主容器(如表或td)，但也要检查是否在更深的地方取消了美化代码:

#13

use .something without td or th

使用。没有td或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>[e-mail]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[e-mail]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[e-mail]</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

#14

Bootstrap 4.0

On Bootstrap 4.0, we have to declare the table rows as flex-boxes by adding class d-flex, and also drop xs, md, suffixes to allow Bootstrap to automatically derive it from the viewport.

在Bootstrap 4.0中，我们必须通过添加d-flex类将表行声明为浮动框，并删除xs、md后缀，以允许引导程序自动从viewport派生它。

So it will look following:

因此它看起来如下:

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

Hope this will be helpful to someone else out there!

希望这对其他人有帮助!

Cheers!

干杯!