所以我在这里有这个代码:
<table>
<tr>
<td width="200px" valign="top">
<div class="left_menu">
<div class="menu_item">
<a href="#">Home</a>
</div>
</div>
</td>
<td width="1000px" valign="top">Content</td>
</tr>
</table>
使用CSS
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
它在我的浏览器上工作正常,我在mac和PC的每个浏览器中都进行了测试,但有人抱怨td
的{{1}}一直在改变宽度。我不知道他在说什么。有谁知道他或她在width
看到宽度变化的原因?
答案 0 :(得分:100)
应该是:
<td width="200">
或
<td style="width: 200px">
请注意,如果您的单元格包含一些不适合200px的内容(例如somelongwordwithoutanyspaces
),则单元格将会延伸,除非您的CSS包含table-layout: fixed
表格。
修改强>
正如克里斯蒂娜的孩子们在答案中所说,你应该避免使用width
属性并使用内联CSS(style
属性)。尽可能将风格和结构分开是一种很好的做法。
答案 1 :(得分:23)
表中的宽度和/或高度不再是标准的;正如Ianzz所说,他们已被弃用。相反,最好的方法是在表格单元格中放置一个块元素,使单元格保持打开所需的大小:
<table>
<tr>
<td valign="top">
<div class="left_menu">
<div class="menu_item">
<a href="#">Home</a>
</div>
</div>
</td>
<td valign="top" class="content">Content</td>
</tr>
</table>
CSS
.content {
width: 1000px;
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.menu_item {
background: none repeat scroll 0 0 #CCCCCC;
border-bottom: 1px solid #999999;
border-radius: 5px 5px 5px 5px;
border-top: 1px solid #FFFFCC;
cursor: pointer;
padding: 5px;
}
答案 2 :(得分:16)
<table style="table-layout:fixed;">
这将强制样式宽度<td>
。如果文本溢出,它将与其他<td>
文本重叠。所以尝试使用媒体查询。
答案 3 :(得分:7)
您无法在表格的width
/ height
属性中指定单位;这些总是以像素为单位,但你不应该使用它们,因为它们已被弃用。
答案 4 :(得分:4)
您可以尝试“table-layout:fixed;”到你的桌子
table-layout: fixed;
width: 150px;
150px或您想要的宽度。
答案 5 :(得分:4)
您可以在<td>
标签中使用css:display:inline-block
赞:<td style="display:inline-block">
答案 6 :(得分:3)
尝试使用
word-wrap: break-word;
希望这个帮助
答案 7 :(得分:1)
试试这个:
word-break: break-all;
答案 8 :(得分:0)
请注意,调整thead中列的宽度会影响整个表
<table>
<thead>
<tr width="25">
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tr>
<td>Joe</td>
<td>joe@email.com</td>
</tr>
</table>
在我的情况下,thead的宽度&gt; tr覆盖了表格上的宽度&gt; tr> td直接。
答案 9 :(得分:0)
使用
<table style="table-layout:fixed;">
这将强制表格设置为100%的宽度。然后使用此代码
$('#dataTable').dataTable( {
bAutoWidth: false,
aoColumns : [
{ sWidth: '45%' },
{ sWidth: '45%' },
{ sWidth: '10%' },
]
});
(表ID为dataTable,具有3列) 指定每个单元格的长度
答案 10 :(得分:0)
我尝试了许多解决方案,但对我而言不起作用,因此我尝试对表进行flex操作,并且对所有表功能(如边框折叠)都很好,对我来说很好,
这是我的HTML要求
<table>
<thead>
<tr>
<th>1</th>
<th colspan="3">2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td colspan="3">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
</tr>
</tbody>
</table>
我的CSS
table{
display: flex;
flex-direction: column;
}
table tr{
display: flex;
width: 100%;
}
table > thead > tr > th:first-child{
width: 20%;
}
table > thead > tr > th:last-child{
width: 80%;
}
table > tbody tr > td:first-child{
width: 10%;
}
table > tbody tr > td{
width: 30%;
}
table > tbody tr > td[colspan="2"]{
width: 60%;
}
table > tbody tr > td[colspan="3"]{
width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
border-right: 0;
}
答案 11 :(得分:0)
使用css规则中的min-width
和max-width
很容易解决此问题。
HTML
<table>
<tr>
<td class="name">Peter</td>
<td class="hobby">Photography</td>
<td class="comment">A long comment about something...</td>
</td>
</table>
CSS
.name {
max-width: 80px;
min-width: 80px;
}
这将强制第一列的宽度为80px。通常,我只使用max-width而不使用min-width来填充文本,该文本有时会因创建具有超宽列(大多数为空)的表而导致时间过长。 OP的问题是关于设置为固定宽度,因此这两个规则在一起。在许多浏览器中,表列将忽略CSS中的width:80px;
。在HTML中设置宽度确实可以,但是并不是您应该这样做的方式。
我建议使用最小和最大宽度规则,而不是将它们设置为相同,而是设置一个范围。这样一来,表格就可以完成任务,但是您可以给它一些提示,以处理内容太长的内容。
如果我想防止文本换行并增加行的高度-但仍使用户可以看到全文,则可以在主规则上使用white-space: nowrap;
,然后将鼠标悬停删除宽度和nowrap规则的规则,以便用户将鼠标悬停在其上时可以看到全部内容。
像这样:
CSS
.name {
max-width: 80px;
white-space: nowrap;
overflow: hidden;
}
.name:hover {
max-width: none;
white-space: normal;
overflow:auto;
}
这完全取决于您要实现的目标。我希望这可以帮助别人。 PS顺便说一句,对于iOS,有一个修复程序不适用于悬停功能-请参见CSS Hover Not Working on iOS Safari and Chrome
答案 12 :(得分:0)
如果您没有将表格设置为具有 table-layout: fixed
和特定的宽度,那么如果内容更宽,表格单元格将超出其自身的宽度。这就是他/她所抱怨的。
答案 13 :(得分:-1)