How can I prevent table columns from wrapping when the browser is re-sized?
Question
I have a HTML table structure of 10 rows. The problem is that the columns content get wrapped when I reduce browser page size. It looks awkward when I re-sized page to half of its original size.
Here is my 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>
Following is the CSS (selective):
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;
}
As my above code shows that I am using percentages in defining width of elements. Any valuable suggestions would be appreciated.
1 answers
solution1
1 2014-05-26 08:08:59
Please enclose your table within a div having a specific min-width . 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>
Add this to your css
.tab{
min-width: 500px;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I prevent floated div elements from wrapping when the browser is re-sized?
How can I prevent div elements with variables widths from wrapping when browser is re-sized?
Why is this menu items disappearing when the browser is re-sized?
How to make webpage content not to get collapse or disposition when browser re-sized
Div moving when screen is re-sized
Navigation bar buttons stack on top of each other when browser window is re-sized
How to keep all elements on an HTML page in the same location when window is re-sized?
My webpage messes up when re-sized
Issue with text boxes moving when site re-sized
HTML/CSS elements moving when screen is re-sized
Related Tags