Alright, so I’ve got an ASP.NET GridView which of course generates a table. This table is inside of a div that has a static width of let’s say 673px. However, it doesn’t seem to matter what I do, I can’t get this table to stay within those dimensions and scroll horizontally.
Here is the HTML with the style inline:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*
{
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
html
{
color: #000;
font-size: 12px;
border-top-color: currentColor;
border-right-color: currentColor;
border-bottom-color: currentColor;
border-left-color: currentColor;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
body
{
background-color: rgb(237, 237, 237);
}
a
{
color: #154995;
text-decoration: none;
}
.d-outer
{
width: 958px;
text-align: left;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.d-inner
{
width: 958px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-image: url("../images/base/inner_bg.gif");
background-attachment: scroll;
background-repeat: repeat-y;
background-position-x: left;
background-position-y: top;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
}
.d-innerCont
{
width: 908px;
padding-top: 10px;
padding-right: 25px;
padding-bottom: 15px;
padding-left: 25px;
float: left;
}
.d-main
{
width: 908px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
}
.d-left
{
width: 665px;
padding-top: 0px;
padding-right: 23px;
padding-bottom: 0px;
padding-left: 10px;
float: left;
}
.gridViewStyle
{
width: 630px;
overflow: scroll;
}
.gridViewStyle th, .gridViewStyle td
{
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
.d-dataGridCont
{
width: 665px;
padding-top: 0px;
float: left;
}
.d-dataGridBody
{
width: 665px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
background-image: url("../images/base/data_grid_bg.gif");
background-attachment: scroll;
background-repeat: repeat-y;
background-position-x: left;
background-position-y: top;
background-size: auto;
background-origin: padding-box;
background-clip: border-box;
background-color: transparent;
}
.d-dataGridBodyRow
{
width: 637px;
padding-top: 0px;
padding-right: 14px;
padding-bottom: 0px;
padding-left: 14px;
float: left;
}
</style>
</head>
<body>
<form name="aspnetForm" id="aspnetForm" onsubmit="javascript:return WebForm_OnSubmit();"
method="post">
<div class="d-outer">
<div class="d-inner">
<div class="d-innerCont">
<div class="d-main">
<div class="d-left">
<div class="d-dataGridCont">
<div class="d-dataGridBody">
<div class="d-dataGridBodyRow">
<div id="ctl00_formContent_PaymentsDiv">
<div>
<table class="gridViewStyle" id="ctl00_formContent_grdPayments" style="width: 95%;
color: #333333; font-family: Lato; border-top-color: #c8c8c8; border-right-color: #c8c8c8;
border-bottom-color: #c8c8c8; border-left-color: #c8c8c8; border-top-width: 2px;
border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-top-style: solid;
border-right-style: solid; border-bottom-style: solid; border-left-style: solid;
border-collapse: collapse;" border="0" cellspacing="0">
<tbody style="">
<tr align="center" style="color: white; background-color: rgb(36, 97, 191);">
<td colspan="6">
<table border="0">
<tbody>
<tr>
<td>
<span>1</span>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$2')">
2</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$3')">
3</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$4')">
4</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$5')">
5</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$6')">
6</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$7')">
7</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$8')">
8</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$9')">
9</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$10')">
10</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$11')">
...</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr style="color: #333333; font-size: 18px; font-weight: bold; white-space: nowrap;
background-color: white;">
<th scope="col">
Issued Date
</th>
<th scope="col">
Customer
</th>
<th scope="col">
Vehicle Type
</th>
<th scope="col">
Claim #
</th>
<th scope="col">
Amount
</th>
<th scope="col">
Status
</th>
</tr>
<tr style="font-family: Lato; font-size: 16px; white-space: nowrap; background-color: rgb(226, 237, 243);">
<td>
2012/11/12
</td>
<td>
Bob's Repair
</td>
<td>
1999 Chevrolet Lumina
</td>
<td>
4687426946874269
</td>
<td align="right">
$409,714.00
</td>
<td>
ISSUED
</td>
</tr>
<tr align="center" style="color: white; background-color: rgb(36, 97, 191);">
<td colspan="6">
<table border="0">
<tbody>
<tr>
<td>
<span>1</span>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$2')">
2</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$3')">
3</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$4')">
4</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$5')">
5</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$6')">
6</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$7')">
7</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$8')">
8</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$9')">
9</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$10')">
10</a>
</td>
<td>
<a style="color: white;" href="javascript:__doPostBack('ctl00$formContent$grdPayments','Page$11')">
...</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
What I need to get in the end is the table to adhere to the static width of its container and scroll both the header and row data horizontally.
I thank you all for your time!
Put overflow:auto; in the .d-dataGridBody