Html 使用 CSS td 宽度绝对，位置

Using CSS td width absolute, position

提问by Jake

Please see this JSFIDDLE

请看这个JSFIDDLE

td.rhead { width: 300px; }

Why doesn't the CSS width work?

为什么 CSS 宽度不起作用？

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

Also, what are the effects of position:fixed, absolute etc have on td widths if any? I am looking for a reason more than a fix. I am hoping to understand how it works.

另外，位置：固定、绝对等对 td 宽度有什么影响（如果有）？我正在寻找一个不仅仅是修复的原因。我希望了解它是如何工作的。

回答by Explosion Pills

This may not be what you want to hear, but display: table-celldoes not respect width and will be collapsed based on the width of the entire table. You can get around this easily just by having a display: blockelement inside of the table cell itself whose width you specify, e.g

这可能不是你想听到的，但display: table-cell不尊重宽度，会根据整个表格的宽度折叠。您可以通过display: block在表格单元格本身内放置一个您指定宽度的元素来轻松解决这个问题，例如

<td><div style="width: 300px;">wide</div></td>

This shouldn't make much of a difference if the <table>itself is position: fixedor absolute because the position of the cells are all static relative to the table.

如果它<table>本身是position: fixed或绝对的，这应该没有太大区别，因为单元格的位置相对于表格都是静态的。

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDIT: I can't take credit, but as the comments say you can just use min-widthinstead of widthon the table cell instead.

编辑：我不能居功，但随着评论说，你可以使用min-width，而不是width在桌子上，而不是细胞。

回答by Hugo Yates

You're better off using table-layout: fixed

你最好使用 table-layout: fixed

Autois the default value and with large tables can cause a bit of client side lag as the browser iterates through it to check all the sizes fit.

Auto是默认值，当浏览器遍历它以检查所有大小是否合适时，大表可能会导致客户端有点延迟。

Fixedis far better and renders quicker to the page. The structure of the table is dependent on the tables overall width and the width of each of the columns.

固定好得多，并且可以更快地呈现到页面上。表格的结构取决于表格的整体宽度和每一列的宽度。

Here it is applied to the original example: JSFIDDLE, You'll note that the remaining columns are crushed and overlapping their content. We can fix that with some more CSS (all I've had to do is add a class to the first TR):

这里它应用于原始示例：JSFIDDLE，您会注意到剩余的列被压碎并重叠了它们的内容。我们可以用更多的 CSS 来解决这个问题（我所要做的就是向第一个 TR 添加一个类）：

    table {
        width: 100%;
        table-layout: fixed;
    }

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

Seen in action here: JSFIDDLE

在这里看到的行动：JSFIDDLE

回答by Matthew Brown

The reason it doesn't work in the link your provided is because you are trying to display a 300px column PLUS 52 columns the span 7 columns each. Shrink the number of columns and it works. You can't fit that many on the screen.

它在您提供的链接中不起作用的原因是因为您试图显示 300px 列加上 52 列，每列跨越 7 列。缩小列数就可以了。你不能在屏幕上放那么多。

If you want to force the columns to fit try setting:

如果要强制列适合尝试设置：

body {min-width:4150px;}

see my jsfiddle: http://jsfiddle.net/Mkq8L/6/@mike I can't comment yet.

看我的 jsfiddle：http: //jsfiddle.net/Mkq8L/6/@mike 我还不能评论。

回答by He Hui

The reason, is, because you did not specify the width of the table, and your whole bunch of td's are overflowing.

原因是，因为您没有指定表格的宽度，并且您的一大堆 td 都溢出了。

This for example, i've given the table a width of 5000px, which I thought would fit your requirements.

例如，我给表格的宽度为 5000 像素，我认为这符合您的要求。

table{
    width:5000px;
}

It is the exact same code you provided, which I merely added in the table width.

它与您提供的代码完全相同，我只是在表格宽度中添加了它。

I believe what is happening, is because your TD's are way past the default table width. Which you could see, if you pull out about 45 of your td's in each tr, (i.e. the code you provided in your question, not jsfiddle) it works exactly fine

我相信正在发生的事情是因为您的 TD 远远超过了默认的表格宽度。您可以看到，如果您在每个 tr 中取出大约 45 个 td（即您在问题中提供的代码，而不是 jsfiddle），它就可以正常工作

回答by amirali shahinpour

Try this it work.

试试这个吧。

<table>
<thead>
<tr>
<td width="300">need 300px</td>

回答by sambrmg

Try to use

尝试使用

table {
  table-layout: auto;
}

If you use Bootstrap, class tablehas table-layout: fixed;by default.

如果您使用的引导，类table有table-layout: fixed;默认。

回答by Cyan Baltazar

Use table-layout property and the "fixed" value on your table.

使用表格布局属性和表格上的“固定”值。

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

After setting up the entire width of the table, you can now setup the width in % of the td's.

设置表格的整个宽度后，您现在可以以 td 的百分比设置宽度。

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

您可以在此链接中了解更多信息：http: //www.w3schools.com/cssref/pr_tab_table-layout.asp

回答by mathewsun

My crazy solution.)

我疯狂的解决方案。）

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

回答by Dally S

If table width is for example 100%, try using a percentage width on td such as 20%.

例如，如果表格宽度为 100%，请尝试在 td 上使用百分比宽度，例如 20%。

回答by simhumileco

Wrap content from first cell in div e.g. like that:

将 div 中第一个单元格的内容包装起来，例如：

HTML:

HTML：

<td><div class="rhead">a little space</div></td>

CSS:

CSS：

.rhead {
  width: 300px;
}

Here is a jsfiddle.

这是一个jsfiddle。