Solved

Table column width not obaying

Posted on 2014-01-01
5
262 Views
Last Modified: 2014-01-17
I'm trying to create a table within a table, however the outer table has an extra column for the scrollbar, however even though I specify the column width it is not obeying the same column width and making the columns out of line.

I've tried making the table fixed, and displaying as a block but to no avail.

Ive put my code on JSFiddle in the hope someone can assist me in the correct CSS I need.

Any pointers would be appreciated, thank you in advance
0
Comment
Question by:tonelm54
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 17

Expert Comment

by:nanharbison
ID: 39750213
Why don't you put the div outside the table, and just have one table?
 <div class="scrollit" style="overflow-y: scroll; overflow-x: hidden; height:100px; width:325px;"><table id="testTable" border="1">
    <tr>
        <th width="45px">A00</th>
        <th width="45px">B00</th>
        <th width="45px">C00</th>
        <th width="45px">D00</th>
        <th width="45px">E00</th>
        <th width="45px">F00</th>
        <th width="45px">G00</th>
    </tr>
    <tbody>

                        <tr>
                            <td width="45px">A01</td>
                            <td width="45px">B01</td>
                            <td width="45px">C01</td>
                            <td width="45px">D01</td>
                            <td width="45px">E01</td>
                            <td width="45px">F01</td>
                            <td width="45px">G01</td>
                       
                        </tr>
                        <tr>
                            <td width="45px">A02</td>
                            <td width="45px">B02</td>
                            <td width="45px">C02</td>
                            <td width="45px">D02</td>
                            <td width="45px">E02</td>
                            <td width="45px">F02</td>
                            <td width="45px">G02</td>
                        </tr>
                        <tr>
                            <td width="45px">A03</td>
                            <td width="45px">B03</td>
                            <td width="45px">C03</td>
                            <td width="45px">D03</td>
                            <td width="45px">E03</td>
                            <td width="45px">F03</td>
                            <td width="45px">G03</td>
                        </tr>
                        <tr>
                            <td width="45px">A04</td>
                            <td width="45px">B04</td>
                            <td width="45px">C04</td>
                            <td width="45px">D04</td>
                            <td width="45px">E04</td>
                            <td width="45px">F04</td>
                            <td width="45px">G04</td>
                        </tr>
                        <tr>
                            <td width="45px">A05</td>
                            <td width="45px">B05</td>
                            <td width="45px">C05</td>
                            <td width="45px">D05</td>
                            <td width="45px">E05</td>
                            <td width="45px">F05</td>
                            <td width="45px">G05</td>
                        </tr>
                        <tr>
                            <td width="45px">A06</td>
                            <td width="45px">B06</td>
                            <td width="45px">C06</td>
                            <td width="45px">D06</td>
                            <td width="45px">E06</td>
                            <td width="45px">F06</td>
                            <td width="45px">G06</td>
                        </tr>
                        <tr>
                            <td width="45px">A07</td>
                            <td width="45px">B07</td>
                            <td width="45px">C07</td>
                            <td width="45px">D07</td>
                            <td width="45px">E07</td>
                            <td width="45px">F07</td>
                            <td width="45px">G07</td>
                        </tr>
                        <tr>
                            <td width="45px">A08</td>
                            <td width="45px">B08</td>
                            <td width="45px">C08</td>
                            <td width="45px">D08</td>
                            <td width="45px">E08</td>
                            <td width="45px">F08</td>
                            <td width="45px">G08</td>
                        </tr>
                        <tr>
                            <td width="45px">A09</td>
                            <td width="45px">B09</td>
                            <td width="45px">C09</td>
                            <td width="45px">D09</td>
                            <td width="45px">E09</td>
                            <td width="45px">F09</td>
                            <td width="45px">G09</td>
                        </tr>
                        <tr>
                            <td width="45px">A10</td>
                            <td width="45px">B10</td>
                            <td width="45px">C10</td>
                            <td width="45px">D10</td>
                            <td width="45px">E10</td>
                            <td width="45px">F10</td>
                            <td width="45px">G10</td>
                        </tr>
                        <tr>
                            <td width="45px">A11</td>
                            <td width="45px">B11</td>
                            <td width="45px">C11</td>
                            <td width="45px">D11</td>
                            <td width="45px">E11</td>
                            <td width="45px">F11</td>
                            <td width="45px">G11</td>
                        </tr>
                        <tr>
                            <td width="45px">A12</td>
                            <td width="45px">B12</td>
                            <td width="45px">C12</td>
                            <td width="45px">D12</td>
                            <td width="45px">E12</td>
                            <td width="45px">F12</td>
                            <td width="45px">G12</td>
                        </tr>
                        <tr>
                            <td width="45px">A13</td>
                            <td width="45px">B13</td>
                            <td width="45px">C13</td>
                            <td width="45px">D13</td>
                            <td width="45px">E13</td>
                            <td width="45px">F13</td>
                            <td width="45px">G13</td>
                        </tr>
                        <tr>
                            <td width="45px">A14</td>
                            <td width="45px">B14</td>
                            <td width="45px">C14</td>
                            <td width="45px">D14</td>
                            <td width="45px">E14</td>
                            <td width="45px">F14</td>
                            <td width="45px">G14</td>
                        </tr>
                        <tr>
                            <td width="45px">A15</td>
                            <td width="45px">B15</td>
                            <td width="45px">C15</td>
                            <td width="45px">D15</td>
                            <td width="45px">E15</td>
                            <td width="45px">F15</td>
                            <td width="45px">G15</td>
                        </tr>
                        <tr>
                            <td width="45px">A16</td>
                            <td width="45px">B16</td>
                            <td width="45px">C16</td>
                            <td width="45px">D16</td>
                            <td width="45px">E16</td>
                            <td width="45px">F16</td>
                            <td width="45px">G16</td>
                        </tr>

    </tbody>
</table>
</div>

Open in new window

0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39750217
Actually, the width could be a little wider, like 350px or something.
0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39750222
No need for table in a table...it's 2014 after all.

http://jsbin.com/IqANEHe/1/edit?html,css,output  Credit to http://www.imaputz.com/cssStuff/bigFourVersion.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <table id="testTable" border="1" class="scrollTable">
    <thead class="fixedHeader">
    <tr>
        <th width="45px">A00</th>
        <th width="45px">B00</th>
        <th width="45px">C00</th>
        <th width="45px">D00</th>
        <th width="45px">E00</th>
        <th width="45px">F00</th>
        <th width="45px">G00</th>
     
    </tr>
    </thead>
    <tbody class="scrollContent">
      
             
                        <tr>
                            <td width="45px">A01</td>
                            <td width="45px">B01</td>
                            <td width="45px">C01</td>
                            <td width="45px">D01</td>
                            <td width="45px">E01</td>
                            <td width="45px">F01</td>
                            <td width="45px">G01</td>
                        </tr>
                        <tr>
                            <td width="45px">A02</td>
                            <td width="45px">B02</td>
                            <td width="45px">C02</td>
                            <td width="45px">D02</td>
                            <td width="45px">E02</td>
                            <td width="45px">F02</td>
                            <td width="45px">G02</td>
                        </tr>
                        <tr>
                            <td width="45px">A03</td>
                            <td width="45px">B03</td>
                            <td width="45px">C03</td>
                            <td width="45px">D03</td>
                            <td width="45px">E03</td>
                            <td width="45px">F03</td>
                            <td width="45px">G03</td>
                        </tr>
                        <tr>
                            <td width="45px">A04</td>
                            <td width="45px">B04</td>
                            <td width="45px">C04</td>
                            <td width="45px">D04</td>
                            <td width="45px">E04</td>
                            <td width="45px">F04</td>
                            <td width="45px">G04</td>
                        </tr>
                        <tr>
                            <td width="45px">A05</td>
                            <td width="45px">B05</td>
                            <td width="45px">C05</td>
                            <td width="45px">D05</td>
                            <td width="45px">E05</td>
                            <td width="45px">F05</td>
                            <td width="45px">G05</td>
                        </tr>
                        <tr>
                            <td width="45px">A06</td>
                            <td width="45px">B06</td>
                            <td width="45px">C06</td>
                            <td width="45px">D06</td>
                            <td width="45px">E06</td>
                            <td width="45px">F06</td>
                            <td width="45px">G06</td>
                        </tr>
                        <tr>
                            <td width="45px">A07</td>
                            <td width="45px">B07</td>
                            <td width="45px">C07</td>
                            <td width="45px">D07</td>
                            <td width="45px">E07</td>
                            <td width="45px">F07</td>
                            <td width="45px">G07</td>
                        </tr>
                        <tr>
                            <td width="45px">A08</td>
                            <td width="45px">B08</td>
                            <td width="45px">C08</td>
                            <td width="45px">D08</td>
                            <td width="45px">E08</td>
                            <td width="45px">F08</td>
                            <td width="45px">G08</td>
                        </tr>
                        <tr>
                            <td width="45px">A09</td>
                            <td width="45px">B09</td>
                            <td width="45px">C09</td>
                            <td width="45px">D09</td>
                            <td width="45px">E09</td>
                            <td width="45px">F09</td>
                            <td width="45px">G09</td>
                        </tr>
                        <tr>
                            <td width="45px">A10</td>
                            <td width="45px">B10</td>
                            <td width="45px">C10</td>
                            <td width="45px">D10</td>
                            <td width="45px">E10</td>
                            <td width="45px">F10</td>
                            <td width="45px">G10</td>
                        </tr>
                        <tr>
                            <td width="45px">A11</td>
                            <td width="45px">B11</td>
                            <td width="45px">C11</td>
                            <td width="45px">D11</td>
                            <td width="45px">E11</td>
                            <td width="45px">F11</td>
                            <td width="45px">G11</td>
                        </tr>
                        <tr>
                            <td width="45px">A12</td>
                            <td width="45px">B12</td>
                            <td width="45px">C12</td>
                            <td width="45px">D12</td>
                            <td width="45px">E12</td>
                            <td width="45px">F12</td>
                            <td width="45px">G12</td>
                        </tr>
                        <tr>
                            <td width="45px">A13</td>
                            <td width="45px">B13</td>
                            <td width="45px">C13</td>
                            <td width="45px">D13</td>
                            <td width="45px">E13</td>
                            <td width="45px">F13</td>
                            <td width="45px">G13</td>
                        </tr>
                        <tr>
                            <td width="45px">A14</td>
                            <td width="45px">B14</td>
                            <td width="45px">C14</td>
                            <td width="45px">D14</td>
                            <td width="45px">E14</td>
                            <td width="45px">F14</td>
                            <td width="45px">G14</td>
                        </tr>
                        <tr>
                            <td width="45px">A15</td>
                            <td width="45px">B15</td>
                            <td width="45px">C15</td>
                            <td width="45px">D15</td>
                            <td width="45px">E15</td>
                            <td width="45px">F15</td>
                            <td width="45px">G15</td>
                        </tr>
                        <tr>
                            <td width="45px">A16</td>
                            <td width="45px">B16</td>
                            <td width="45px">C16</td>
                            <td width="45px">D16</td>
                            <td width="45px">E16</td>
                            <td width="45px">F16</td>
                            <td width="45px">G16</td>
                        </tr>
                
        
    </tbody>
</table>
</body>
</html>

Open in new window

/* Terence Ordona, portal[AT]imaputz[DOT]com         */
/* http://creativecommons.org/licenses/by-sa/2.0/    */

/* begin some basic styling here                     */
body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

table, td, a {
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
	font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h2 {
	font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h3 {
	font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #008000;
	margin: 0 0 15px 0
}
/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 285px;
	overflow: auto;
	width: 756px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 756px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	width: 740px
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	width: 756px
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */
thead.fixedHeader tr {
	position: relative
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
html>body thead.fixedHeader tr {
	display: block
}

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

/* make the A elements pretty. makes for nice clickable headers                */
thead.fixedHeader a, thead.fixedHeader a:link, thead.fixedHeader a:visited {
	color: #FFF;
	display: block;
	text-decoration: none;
	width: 100%
}

/* make the A elements pretty. makes for nice clickable headers                */
/* WARNING: swapping the background on hover may cause problems in WinIE 6.x   */
thead.fixedHeader a:hover {
	color: #FFF;
	display: block;
	text-decoration: underline;
	width: 100%
}

/* define the table content to be scrollable                                              */
/* set TBODY element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */
/* induced side effect is that child TDs no longer accept width: auto                     */
html>body tbody.scrollContent {
	display: block;
	height: 262px;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

/* define width of TH elements: 1st, 2nd, and 3rd respectively.          */
/* Add 16px to last TH for scrollbar padding. All other non-IE browsers. */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body thead.fixedHeader th {
	width: 200px
}

html>body thead.fixedHeader th + th {
	width: 240px
}

html>body thead.fixedHeader th + th + th {
	width: 316px
}

/* define width of TD elements: 1st, 2nd, and 3rd respectively.          */
/* All other non-IE browsers.                                            */
/* http://www.w3.org/TR/REC-CSS2/selector.html#adjacent-selectors        */
html>body tbody.scrollContent td {
	width: 200px
}

html>body tbody.scrollContent td + td {
	width: 240px
}

html>body tbody.scrollContent td + td + td {
	width: 300px
}

Open in new window

0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39751034
Thanks Scott. The add code function used to be in a different place, and I couldn't find where it went. I have always used the code block before. I see it now.
0

Featured Post

[Webinar] How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question