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>
Related
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 that needs to look like the attached image.
Notice the border under Name that does not extend the full length like the row highlight does. What I can't figure out is how to get the border to be short and the row background to extend to the edge of the containing div. Currently I'm applying padding to the first and last <td> cells to get the padding. My initial attempt was to apply the padding to the <tr> and apply the border to the <th>'s in the table head but it seems <tr>'s do not take padding even with border-collapse: collapse; set.
Here is an attached jsfiddle of the problem. The red border needs to be aligned with the td content.
https://jsfiddle.net/0vhqg4xe
Any ideas would be appreciated.
You can add a <span> tag around each text in <th>, and apply the border to it.
<th><span>Test 1</span></th>
<th><span>Test 2</span></th>
thead th span {
display: block;
border-bottom: 1px solid red;
}
.wrapper {
background: blue;
color: white;
padding-top: 10px;
padding-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
border: 0;
}
tr {
border: 0;
}
thead th span {
display: block;
border-bottom: 1px solid red;
}
tr.highlight {
background: green;
}
tr > td:first-child,
th:first-child {
padding-left: 20px;
}
tr > td:last-child,
th:last-child {
padding-right: 20px;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th><span>Test 1</span>
</th>
<th><span>Test 2</span>
</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
</table>
</div>
Or, use a pseudo element for the border, so you won't need to change the HTML.
thead tr th {
position: relative;
}
thead tr th:before {
content: "";
display: block;
height: 1px;
overflow: hidden;
background: red;
position: absolute;
left: 20px;
right: 0;
bottom: 0;
}
thead tr th:last-child:before {
left: 0;
right: 20px;
}
.wrapper {
background: blue;
color: white;
padding-top: 10px;
padding-bottom: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
th {
text-align: left;
border: 0;
}
tr {
border: 0;
}
thead tr th {
position: relative;
}
thead tr th:before {
content: "";
display: block;
height: 1px;
overflow: hidden;
background: red;
position: absolute;
left: 20px;
right: 0;
bottom: 0;
}
thead tr th:last-child:before {
left: 0;
right: 20px;
}
tr.highlight {
background: green;
}
tr > td:first-child,
th:first-child {
padding-left: 20px;
}
tr > td:last-child,
th:last-child {
padding-right: 20px;
}
<div class="wrapper">
<table>
<thead>
<tr>
<th>Test 1</th>
<th>Test 2</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
</table>
</div>
I've recently solved this problem, incase anybody comes across this post in the future, here it is.
Here is an image of the result ...
... here is the code ...
<style>
* {
font-family: sans-serif;
}
/* table wrapper for continuous border */
.table {
width: 500px;
border: solid 1px rgb(221,221,221);
border-radius: 4px;
overflow: hidden;
text-align: left;
}
/* table border */
.table table {
width: 100%;
border-collapse: collapse; /* removes gap between cells */
}
.table thead th {
font-weight: bold;
background-color: rgb(245,245,245);
border-bottom: solid 1px rgb(221, 221, 221);
}
/* cell padding */
.table th, td {
padding: 10px;
}
/* add row hover */
.table tr:hover td {
background-color: rgb(245,245,245);
}
/* create 1px gap in table for line */
.table tr.line-break td {
position: relative;
top: 1px;
}
/* create the line */
.table tr.line-break td:after {
content: '';
position: absolute;
top: -1px;
left: 0px;
height: 1px;
width: 100%;
background-color: rgb(235,235,235);
}
/* reduce width of line for first and last cells, by cell padding amount */
.table tr.line-break td:first-child:after,
.table tr.line-break td:last-child:after {
width: calc(100% - 10px);
}
/* pull line on first cell to the right */
.table tr.line-break td:first-child:after {
right: 0px;
left: auto;
}
</style>
<div class="table">
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>Male</td>
<td>35</td>
</tr>
<tr class="line-break">
<td>Steve</td>
<td>Cook</td>
<td>Male</td>
<td>27</td>
</tr>
<tr>
<td>Susan</td>
<td>Walters</td>
<td>Female</td>
<td>34</td>
</tr>
</tbody>
</table>
</div>
... and here is a link of a CodePen I made for the working solution.
https://codepen.io/latchy/pen/wvwoxXe
The reason the table is wrapped inside a DIV is so that when I push the table row down 1px to allow for the height of the line, the border on the sides is not broken. It also makes it easy to apply a border radius to the table.
Hope this helps someone!
-- Latchy
.border-table .bordered {
position: relative;
background: red;
}
.border-table .bordered:before,
.border-table .bordered:after {
width: 90%;
left: 5%;
height: 1px;
background: blue;
content: '';
position: absolute;
}
.border-table .bordered:before {
top: 0;
}
.border-table .bordered:after {
bottom: 0;
}
<div class="wrapper border-table">
<table>
<thead>
<tr>
<th class="bordered">Test 1</th>
<th class="bordered">Test 2</th>
</tr>
</thead>
<tbody>
<tr class="highlight">
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
<tr>
<td>Some Text</td>
<td>Some Text</td>
</tr>
</tbody>
</table>
</div>
Just add an ::after pseudo element to the tr's and play around with the values (preferably in percentages) so you put the "simulated border" in the desired place.
The following code is just an example of what I've added on the image above (notice that last row can be excluded of having border with :last-of-type):
tbody {
tr {
position: relative;
&::after {
content: '';
position: absolute;
width: 95%;
height: 0.5px;
background-color: #d2d4e1;
left: 2.5%;
bottom: 0;
}
&:last-of-type {
&::after {
content: none;
}
}
}
}
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 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/