我有一个 10 行的 HTML 表格结构。问题是当我减小浏览器页面大小时，列内容会被换行。当我将页面大小调整为原始大小的一半时，看起来很尴尬。
这是我的 HTML:
<body>
<table class="emailsTable" cellspacing="0" cellpadding="0">
<tr class="gridHeaderBar">
<th colspan="8" class="TableFirstRow">
<span class="LeftAlign">Emails </span>
<table border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td>
<input type="text" id="txtSearch" name="txtSearch" class="txtSearch" value="Search Attachments"
onfocus="if (this.value == 'Search Attachments') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search Attachments';}" />
</td>
<td>
<input type="submit" id="btnSearch" name="btnSearch" value="" onclick="Search()"
title="Search Attachment(s)" />
</td>
<td>
<a href="#">
<img src="Content/themes/base/images/refresh16.gif" alt="Refresh" onclick="Refresh()"
class="refresh" title="Refresh" /></a>
</td>
</tr>
</table>
</th>
</tr>
<tr class="gridColumnHeaderBar">
<td style="width: 1%;">
<img src="Content/themes/base/images/ico_16_5001.gif" alt="Activity Type" style="margin-left: 2px;" />
</td>
<td style="width: 1%;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
</td>
<td>
<img src="Content/themes/base/images/ico_16_attach.gif" alt="E-Mail Attachment(s)"
style="margin-left: 2px;" />
</td>
</tr>
</table>
</td>
<td style="width: 11%;" class="ColHover" onclick="SortbyTo()">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
To</label>
<div id="to_sort_direction" class="sortUp">
</div>
</td>
<td style="width: 11%;">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
From</label>
</td>
<td style="width: 12%;" class="ColHover" onclick="SortbySubject()">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Subject</label>
<div id="subject_sort_direction" class="sortUp">
</div>
</td>
<td style="width: 15%;" class="ColHover" onclick="SortbyDescription()">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Description</label>
<div id="description_sort_direction" class="sortUp">
</div>
</td>
<td style="width: 10%;">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Created on</label>
</td>
<td style="width: 6%;">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Attachment(s)</label>
</td>
</tr>
<tr id="row1" class="row" onclick="DisplayEmailDetails(this)">
<td>
<img id="row1_type" style="display: none;" src="Content/themes/base/images/ico_16_4202.gif"
alt="Activity Type" />
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr id="row1_attachmentcol">
<td style="border: 0px;">
<img id="row1_attachment" style="display: none; margin-left: 7px;" src="Content/themes/base/images/ico_16_attach.gif"
alt="E-Mail Attachment(s)" />
</td>
</tr>
</table>
</td>
<td>
<label id="row1_to" class="divLabel">
</label>
<input type="hidden" id="row1_id" />
</td>
<td>
<label id="row1_from" class="divLabel">
</label>
</td>
<td>
<label id="row1_subject" class="divLabel">
</label>
</td>
<td>
<label id="row1_description" class="divLabel">
</label>
</td>
<td>
<label id="row1_createdon" class="divLabel">
</label>
</td>
<td>
<label id="row1_attachmentcount" class="divLabel">
</label>
</td>
</tr>
...
</table>
</body>
以下是CSS(选择性):
html
{
font-family: "segoe ui";
width: 100%;
height: 100%;
font-size: .75em;
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
}
.emailsTable
{
width: 100%;
}
.gridHeaderBar
{
background-color: #EFF2F6;
height: 26px;
padding-left: 8px;
padding-right: 2px;
}
.TableFirstRow
{
border-bottom: 1px solid #C0C0C0;
border-top: 1px solid #C0C0C0;
}
.LeftAlign
{
color: #3b3b3b;
font-size: 14px;
font-weight: normal;
float: left;
margin-top: 5px;
height: 24px;
margin-top: 2px;
padding: 0px 2px 0px 2px;
}
.gridColumnHeaderBar
{
height: 22px;
border-top: 1px solid #a5acb5;
border-bottom: 1px solid #a5acb5;
border-left: 1px solid #a5acb5;
border-right: 1px solid #a5acb5;
background-image: url('themes/base/images/GridColumnGradient_White.png');
background-repeat: repeat;
border-spacing:0;
}
.ColHover:hover
{
background-image: url('themes/base/images/GridColumnGradientHover_White.png');
background-repeat: repeat-x;
height:20px;
cursor: pointer;
}
.row
{
font-size: 12px;
background-color: White;
}
.row td
{
border-bottom:1pt solid #CFD4DA;
height: 20px;
margin-left: 2px;
}
.row:hover
{
background-color: #CEE3F6 !important;
}
正如我上面的代码所示，我使用百分比来定义元素的宽度。如有任何宝贵建议，我们将不胜感激。
最佳答案
请将您的表格包含在具有特定min-width 的div 中。 Demo
<body>
<div class="tab">
<table class="emailsTable" cellspacing="0" cellpadding="0">
<tr class="gridHeaderBar">
<th colspan="8" class="TableFirstRow">
<span class="LeftAlign">Emails </span>
<table border="0" cellpadding="0" cellspacing="0" align="right">
<tr>
<td>
<input type="text" id="txtSearch" name="txtSearch" class="txtSearch" value="Search Attachments"
onfocus="if (this.value == 'Search Attachments') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search Attachments';}" />
</td>
<td>
<input type="submit" id="btnSearch" name="btnSearch" value="" onclick="Search()"
title="Search Attachment(s)" />
</td>
<td>
<a href="#">
<img src="Content/themes/base/images/refresh16.gif" alt="Refresh" onclick="Refresh()"
class="refresh" title="Refresh" /></a>
</td>
</tr>
</table>
</th>
</tr>
<tr class="gridColumnHeaderBar">
<td style="width: 1%;">
<img src="Content/themes/base/images/ico_16_5001.gif" alt="Activity Type" style="margin-left: 2px;" />
</td>
<td style="width: 1%;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
</td>
<td>
<img src="Content/themes/base/images/ico_16_attach.gif" alt="E-Mail Attachment(s)"
style="margin-left: 2px;" />
</td>
</tr>
</table>
</td>
<td style="width: 11%;" class="ColHover" onclick="SortbyTo()">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
To</label>
<div id="to_sort_direction" class="sortUp">
</div>
</td>
<td style="width: 11%;">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
From</label>
</td>
<td style="width: 12%;" class="ColHover" onclick="SortbySubject()">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Subject</label>
<div id="subject_sort_direction" class="sortUp">
</div>
</td>
<td style="width: 15%;" class="ColHover" onclick="SortbyDescription()">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Description</label>
<div id="description_sort_direction" class="sortUp">
</div>
</td>
<td style="width: 10%;">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Created on</label>
</td>
<td style="width: 6%;">
<img src="Content/themes/base/images/GridColumnVerticalLine_White.png" style="margin-left: 2px;" />
<label style="vertical-align: top; padding-bottom: 2px;">
Attachment(s)</label>
</td>
</tr>
<tr id="row1" class="row" onclick="DisplayEmailDetails(this)">
<td>
<img id="row1_type" style="display: none;" src="Content/themes/base/images/ico_16_4202.gif"
alt="Activity Type" />
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr id="row1_attachmentcol">
<td style="border: 0px;">
<img id="row1_attachment" style="display: none; margin-left: 7px;" src="Content/themes/base/images/ico_16_attach.gif"
alt="E-Mail Attachment(s)" />
</td>
</tr>
</table>
</td>
<td>
<label id="row1_to" class="divLabel">
</label>
<input type="hidden" id="row1_id" />
</td>
<td>
<label id="row1_from" class="divLabel">
</label>
</td>
<td>
<label id="row1_subject" class="divLabel">
</label>
</td>
<td>
<label id="row1_description" class="divLabel">
</label>
</td>
<td>
<label id="row1_createdon" class="divLabel">
</label>
</td>
<td>
<label id="row1_attachmentcount" class="divLabel">
</label>
</td>
</tr>
...
</table>
</div>
</body>
将此添加到您的 CSS 中
.tab{
min-width: 500px;
}
关于html - 重新调整浏览器大小时，如何防止表列换行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23865393/