I have made a table of which does not fill the full width of the parent div in CHROME & SAFARI.
This works fine in Firefox but I would like to get working in all browsers.
After some views on here I found that in some chrome cases can be fixed with setting parent div to...
display: block; width: 100%;
.. but the issue persists.
Also found another couple cases where specifying no margin & padding so gave that a shot and still there are issues with displaying in Chrome & Safari.
THE HTML
<div class='player_box info_pic_2'>
<div style='display: block; width: 100%;'>
<table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; top: 0; right: 0px; height: 30px;'>
<tr class='border_bottom'>
<td>CELL A</td>
<td>CELL B</td>
</tr>
</table>
<table style='margin: 0; padding: 0; width: 100%; border-style: solid; border-width: 1px; position: absolute; left: 0; right: 0px; top: 30px;'>
<tr class='border_bottom'>
<td>ROW A </td>
</tr>
<tr class='border_bottom'>
<td>ROW B </td>
</tr>
<tr class='border_bottom'>
<td>ROW C </td>
</tr>
<tr class='border_bottom'>
<td>ROW D </td>
</tr>
<tr class='border_bottom'>
<td>ROW E </td>
</tr>
<tr class='border_bottom'>
<td>ROW F </td>
</tr>
</table>
</div>
</div>
THE CSS
tr.border_bottom td {
border-bottom:1pt solid black;
}
.info_pic_2 {
position: absolute;;
height: 250px;
top: 130px;
right: 70px;
width: 350px;
max-width: 100%;
display: block;
border-style:solid;
border-width:5px;
color: black;
}
.player_box {
border:solid 4px #000000;
-moz-border-radius-topleft: 33px;
-moz-border-radius-topright:32px;
-moz-border-radius-bottomleft:32px;
-moz-border-radius-bottomright:32px;
-webkit-border-top-left-radius:33px;
-webkit-border-top-right-radius:32px;
-webkit-border-bottom-left-radius:32px;
-webkit-border-bottom-right-radius:32px;
border-top-left-radius:33px;
border-top-right-radius:32px;
border-bottom-left-radius:32px;
border-bottom-right-radius:32px;
text-align:center; background:#575757;
padding:100px 50px 100px 50px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
opacity: 0.8;
}
Your issue appears to be the padding values in your .player_box selector (Second to last line on your CSS. Remove the padding and it will fill correctly.
I can make it behave better by changing this CSS:
.info_pic_2 {
position: absolute;
height: 250px;
top: 130px;
right: 70px;
width: 350px;
max-width: 100%;
display: block;
border-style: solid;
border-width: 5px;
color: black;
}
to:
.info_pic_2 {
height: 250px;
top: 130px;
right: 70px;
max-width: 100%;
display: block;
border-style: solid;
border-width: 5px;
color: black;
}
I've found that mixing absolute positioning and percentage widths is a nightmare.
Edit: The padding doesn't help either, but see my updated version here:
http://jsfiddle.net/rcQmW/2/
Related
Is it possible to set the height of rows in the table to be as the height of the first column in the row if it's position is absolute?
It of course works if I do not use 'position:absolute' (or 'position:fixed') but I need first and last columns to be fixed.
In the example you can see that first column's rows are overlapping. I would like the first and second rows to fit the text inside completely.
http://jsfiddle.net/ujwz4htg/27/
table {
border-collapse: separate;
border-top: 1px solid grey;
}
td {
height: auto;
margin: 0;
border: 1px solid grey;
border-top-width: 0px;
}
td:first-child {
white-space: intial;
position: absolute;
width: 80px;
left: 0;
top: auto;
border-top-width: 1px;
margin-top: -1px;
overflow: hidden;
}
td:last-child {
white-space: initial;
position: absolute;
width: 80px;
right: 160px;
top: auto;
overflow: hidden;
background: grey;
}
div {
width: 600px;
overflow-x: scroll;
padding-left: 5em;
overflow-y: visible;
padding-bottom: 1px;
}
.long {
background: pink;
letter-spacing: 1em;
}
<div>
<table>
<tr>
<td>Row Row Row Row Row</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>1 222222 333333333</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>3</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>4</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
<tr>
<td>5</td>
<td class="long">QWERTYUIOPASDsdasdFGHJKLZXCVBsdfsdfNM</td>
<td>LAST</td>
</tr>
</table>
</div>
I am trying to get both the table tow of the table one and table three to match in width- at present, the last cell does not. The reason for the two tables is fixed headers on table one and scrollable overflow content for table 2. This approach has worked in the past for me and I just cannot figure out what is different with this example to produce this error.
#table_wrapper1 {
position: absolute;
top: 250px;
left: 20px;
height: 47px;
width: 500px;
}
#table1 {
table-layout: fixed;
position: absolute;
display: table;
font-size: 0.7em;
border: solid 1px;
z-index: 2;
width: 100%;
background-color: #F7F7F7;
}
#table_wrapper2 {
position: absolute;
top: 278px;
left: 20px;
width: 500px;
overflow: scroll;
height: 150px;
}
#table2 {
table-layout: fixed;
position: absolute;
display: table;
font-size: .7em;
border: solid 1px;
z-index: 2;
width: 100%;
background-color: #F7F7F7
}
td {
padding: 4px;
border: solid 1px black;
background-color: #FFF4C6;
vertical-align: middle;
text-align: center;
}
th {
padding: 6px;
Border: solid 1px black;
background-color: #BB8A76;
vertical-align: middle;
text-align: center;
}
<div id="table_wrapper1">
<table class="table" id="table1">
<thead>
<tr>
<th>Unit code</th>
<th>Description</th>
<th>Delete unit</th>
<th>Add new unit</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="table_wrapper2">
<table class="table" id="table2">
<thead></thead>
<tbody>
<tr>
<td><input class="unit <?php echo $class;?>" type="text" name="unit_code[]" value="<?php echo #$_POST['unit_code'][0]?>"></td>
<td><textarea cols="10" rows="3" class="<?php echo $class;?>" name="unit_description[]"><?php echo #$_POST['unit_description'][0]?></textarea></td>
<td><img title="remove unit" class="remove_row" src="../images/exit.png"> </td>
<td><img title="add more units" class="add_row" src="../images/add-resource.png"></td>
</tr>
</tbody>
</table>
</div>
It looks like the issue might be the overflow: scroll;. Removing this seems to work on my end.
Edit: Unfortunately you're going to continue running into this issue with the overflow: scroll due to the scrollbar naturally taking up space. You could trying applying negative right padding to your table body wrapper, but you'll then run into browser compatibility issues. Perhaps you could try applying the overflow: scroll to the upper wrapper as well? It wouldn't be pretty, but it might work nonetheless.
I using position fixed to freeze first column in table. How to make it the first column layout(width and height) same as other column to looks like no different with other columns but with freeze status.
<div>
<table>
<tr>
<th class='td1'>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
</table>
</div>
css:
table {
border-collapse: collapse;
border: 1px solid black;
width: 300px;
height: 300px;
}
tr,
td,
th {
border: 1px solid black;
text-align: center;
}
.td1 {
position: fixed;
margin-top: 10px;
margin-left: 10px;
}
div {
width: 200px;
height: 400px;
overflow: auto;
}
JSfiddle demo
Try the below -
table {
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid grey;
width: 300px;
height: 100px;
}
td,
th {
margin: 0;
border: 1px solid grey;
white-space: nowrap;
border-top-width: 0px;
}
div {
width: 200px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding: 0;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-top-width: 1px;
margin-top: -1px;
}
.headcol:before {
content: 'Row ';
}
.long {
background: yellow;
}
<div>
<table>
<tr>
<th class="headcol">h1</th>
<td class="long">h2</td>
<td class="long">h3</td>
</tr>
<tr>
<th class="headcol">D1</th>
<td class="long">D2</td>
<td class="long">D3</td>
</tr>
<tr>
<th class="headcol">D1</th>
<td class="long">D2</td>
<td class="long">D3</td>
</tr>
</table>
</div>
Do you mean like this?
CSS:
table {
border-collapse: collapse;
border: 1px solid black;
width: 300px;
height: 300px;
}
tr,
td,
th {
border: 1px solid black;
text-align: center;
}
.td1 {
position: fixed;
width: 143px;
height: 96px;
margin-left: 5px;
}
div {
width: 200px;
height: 400px;
overflow: auto;
}
HTML:
<div>
<table>
<tr>
<th class='td1'>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
<tr>
<td class='td1'>D1</td>
<td>D2</td>
<td>D3</td>
</tr>
</table>
</div>
I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.
.Table-Normal {
position: relative;
display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
.Table-Normal thead tr {
background-color: #E74C3C;
font-weight: bold;
}
.Table-Normal tr {
margin: 0;
padding: 0;
border: 0;
border: 1px solid #999;
width: 100%;
}
.Table-Normal tr td {
margin: 0;
padding: 4px 8px;
border: 0;
border: 1px solid #999;
}
.Table-Normal tbody tr:nth-child(2) {
background-color: #EEE;
}
<table id="top-leader" class="Table-Normal">
<thead>
<tr>
<td>Position</td>
<td>Name</td>
<td>Kills</td>
<td>Deaths</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Doe</td>
<td>16 Kills</td>
<td>0 Deaths</td>
</tr>
<tr>
<td>2</td>
<td>John Smith</td>
<td>13 Kils</td>
<td>1 Death</td>
</tr>
<tr>
<td>3</td>
<td>Bob Smith</td>
<td>11 Kills</td>
<td>0 Deaths</td>
</tr>
</tbody>
</table>
Remove display: block in .Table-Normal
Fiddle
.Table-Normal {
position: relative;
//display: block;
margin: 10px auto;
padding: 0;
width: 100%;
height: auto;
border-collapse: collapse;
text-align: center;
}
By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.
As people have mentioned you have to remove display:block; for this to work. If you need to keep scrolling functionality wrap the table inside a div and set overflow rules on that
<div class = "table-container">
<table>...</table>
</div>
.table-container{
height:100px
width:100px
overflow-x:scroll;
table{
display: table;
width:100%;
}
}
I have a resizable and movable div using JQuery UI. I want a table inside it that scrolls vertically. Trying to set the table height to 100% basically does nothing, and absolute positioning with top and bottom of 0 doesn't work either. I have tried to put a separate div as a container and that has gotten me closer than anything, but it still does not behave properly.
Here is the fiddle: http://jsfiddle.net/scottbeeson/KrP7v/1/
Here is the relevant CSS:
table {
border-collapse: collapse;
width: 100%; height: 100%;
}
#tableContainer {
height: 100%; width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
And the basic HTML layout:
<div id="window">
<div id="header">Draggable Header</div>
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
I think that this is what you want.
http://jsfiddle.net/KrP7v/12/
#window {
width: 500px;
height: 400px;
min-width: 100px;
min-height: 100px;
border-bottom: 1px solid gray;
}
#header {
height: 25px;
line-height: 25px;
background-color: gray;
color: white;
text-align: center;
}
table {
min-height: 300px;
height: 100%;
width: 100%;
border-collapse: collapse;
}
#tableContainer {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
overflow: auto;
}
td {
padding: 5px;
margin: 0px;
border: 1px solid gray;
}
tr:last-child td {
border-bottom: none;
}
Here's what you can do:
http://jsfiddle.net/KrP7v/4/
#window {
width: 400px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
}