I have an HTML page in which there is a table which populates data from a database table and I am trying to restrict the size of the table by placing it in a div like in the following
<div id="scrollablebody">
<table class="clientTable">
<thead>
<tr>
<th>Grade</th>
<th>Term</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<!--ko foreach: products-->
<tr>
<td class="clientproductHeader" data-bind="text: $data">
</td>
<td class="clientproductHeader" colspan="13"></td>
</tr>
<tbody data-bind="foreach: ko.observableArray($root.datainput()).extendsdistinct('Product').index.Product()[$data]">
<tr data-bind="template: { name: $root.displayMode, data: $data }"></tr>
</tbody>
<!--/ko-->
</table>
</div>
CSS for div
#scrollablebody{height:500px;overflow-y:auto;width:100%;}
But for some reasons the text in tbody is occupying all the space like in the following image
As you can see in the above picture the row with c5+ is unusually occupying lot of space
CSS for the Table
.clientTable {
max-width: 100%;
background-color: grey;
height:75%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: 98%;
margin-left:0;
margin-right:100px;
float: left;
overflow:scroll;
}
table.clientTable thead tr .header {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.clientTable td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientTable th {
padding: initial;
line-height: normal;
text-align: center;
width: initial;
height: 20px;
border: 1px outset gray;
background-color: black;
color: white;
cursor: pointer;
}
Change height to max-height. It's going grow to size if you don't specify and have the overflow as auto.
Related
I am trying to create a CSS table with border all over using the standard method of applying top and left borders to all td elements (apart from those in first column and first row). And then there is a border on the <table>. This method suits my use-case better than one in which we use border-collapse.
But then there is a bug which resembles inner margin on td elements. This margin like space isn't always there but only occurs on some viewports for some reason. Here's my code:
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
.table-container {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 50px;
font-size: 20px;
}
table {
font-size: 15px;
border-spacing: 0;
border: 4px solid black;
border-radius: 35px 35px 0 0;
border-left: none;
border-top: none;
width: 90vw;
background-color: white;
margin-top: 50px;
text-align: center;
}
td {
box-sizing: content-box;
border-left: 4px solid black;
border-top: 4px solid black;
height: 60px;
}
thead td:first-child {
border-top-left-radius: 35px;
}
thead td:last-child {
border-top-right-radius: 33px;
}
thead td {
font-size: 20px;
font-weight: 500;
}
table button {
cursor: pointer;
height: 100%;
border: 0;
background-color: white;
color: #d90429;
}
.progress-bar{
background-color: orange;
}
.progress-bar > div{
background-color: green;
height: 100%;
width: 50%
}
<div class="table-container">
<table>
<thead>
<tr>
<td>Task Type</td>
<td>Target Time (in Minutes)</td>
<td>Percentage Achieved</td>
<td>Add/Delete Tasks</td>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>120</td>
<td class="progress-bar">
<div>50</div>
</td>
<td>
<button type="button">
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
Here's one viewport in which this bug can be seen in action:
I guess running above code snippet and looking at the output in full screen will reproduce this bug
EDIT
As pointed out by KIKOSoftware in comments, the problem seems to be specific to chrome.
My Version of Chrome happens to use 3.991px for border instead of 4px.
on a personal level, having had a thousand problems with borders in HTML tables,
I ended up opting for a radical solution: no border at all!
I use border-collapse: separate; and I play on border-spacing
in addition it lightens the css to write
I recommend it
in your case:
* {
padding : 0;
margin : 0;
}
html, body {
height : 100%;
width : 100%;
background-color: #658d8d; /* this one is mine... */
}
.table-container {
display : flex;
flex-direction : column;
align-items : center;
padding-bottom : 50px;
font-size : 20px;
margin: 1em;
}
table {
font-size : 15px;
border-collapse : separate;
border-spacing : 4px;
background-color : black;
border-radius : 33px 33px 0 0;
width : 90vw;
}
thead td {
font-size : 20px;
font-weight : 500;
}
td {
background-color : white;
height : 60px;
text-align : center;
}
thead td:first-child { border-top-left-radius: 29px; }
thead td:last-child { border-top-right-radius: 29px; }
table button {
cursor : pointer;
height : 100%;
width : 100%;
border : 0;
background-color : white;
color : #d90429;
}
.progress-bar {
background-color: orange;
}
.progress-bar > div {
background-color : green;
height : 100%;
width : 50%
}
<div class="table-container">
<table>
<thead>
<tr>
<td>Task Type</td>
<td>Target Time (in Minutes)</td>
<td>Percentage Achieved</td>
<td>Add/Delete Tasks</td>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>120</td>
<td class="progress-bar"><div>50</div></td>
<td><button type="button">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
I want to set background-image above the background-color (the background-image is a line). See codepen and snippet:
table {
border-collapse: collapse;
}
table,
td {
border: 1px solid black;
}
td.class1 {
background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
}
.class2 {
text-align: center;
color: #fff;
height: 20px;
width: 20px;
background-color: red;
border-radius: 5rem !important;
display: inline-block;
}
<table>
<tr>
<td>S</td>
<td>B</td>
</tr>
<tr>
<td>S</td>
<td class="class1">
<span class="class2">S</span>
</td>
</tr>
</table>
Note that instead of setting background on two classes you can set it in .class2 itself by using background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x, red (the image mentioned first will be stacked over the red background mentioned last) - see demo below:
table {
border-collapse: collapse;
}
table,
td {
border: 1px solid black;
}
td.class1 {
padding: 10px; /* for illustration */
}
.class2 {
text-align: center;
color: #fff;
height: 20px;
width: 20px;
background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
red; /* changed*/
border-radius: 5rem !important;
display: inline-block;
}
<table>
<tr>
<td>S</td>
<td>B</td>
</tr>
<tr>
<td>S</td>
<td class="class1">
<span class="class2">S</span>
</td>
</tr>
</table>
Solution
If you want to have the background image to extend over the full td, one option is to use radial-gradient for the red circle and combining it with background-image for the line. Note that here the text is above the red background color and the line:
table {
border-collapse: collapse;
}
table, td{
border: 1px solid black;
}
td.class1 {
position: relative;
width: 20px;
height: 20px;
padding: 10px;
background: url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x,
radial-gradient(farthest-side,red 70%, transparent 72%);
background-position: center;
text-align: center;
color: #fff;
}
<table>
<tr>
<td>S</td>
<td>B</td>
</tr>
<tr>
<td>S</td>
<td class="class1">
<span class="class2">S</span>
</td>
</tr>
</table>
If you want a strikethrough effect , you could place the line background-image over the <span> background and text, by use negative z-index on the <span> - see demo below:
table {
border-collapse: collapse;
}
table,
td {
border: 1px solid black;
}
td.class1 {
padding: 10px; /* for illustration */
background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
background-position: center;
}
.class2 {
text-align: center;
color: #fff;
height: 20px;
width: 20px;
background-color: red;
border-radius: 5rem !important;
display: inline-block;
position: relative; /* added */
z-index: -1; /* added */
}
<table>
<tr>
<td>S</td>
<td>B</td>
</tr>
<tr>
<td>S</td>
<td class="class1">
<span class="class2">S</span>
</td>
</tr>
</table>
Yet another option for the strikethrough effect is using a pseudo element so that you don't have to mess with z-index - see demo below:
table {
border-collapse: collapse;
}
table,
td {
border: 1px solid black;
}
td.class1 { /* added */
padding: 10px; /* for illustration */
position: relative;
}
td.class1:after { /* added */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
background-position: center; /* added */
}
.class2 {
text-align: center;
color: #fff;
height: 20px;
width: 20px;
background-color: red;
border-radius: 5rem !important;
display: inline-block;
}
<table>
<tr>
<td>S</td>
<td>B</td>
</tr>
<tr>
<td>S</td>
<td class="class1">
<span class="class2">S</span>
</td>
</tr>
</table>
You don't need to have a different class named table.class1
rather this will work well
.class2 {
text-align: center;
color: #fff;
height: 20px;
width: 20px;
border-radius: 5rem !important;
display: inline-block;
background: transparent url(http://davidrhysthomas.co.uk/linked/strike.png) repeat-x;
background-color: red;
}
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 have a table with 3 columns.
Inside every column there is a table with 3 lines.
I want to make this second table like this:
first row is 80 px height
second row is 40 px height and has a black background.
third row has variable height
This table must be vertically aligned to top. It is not. It is vertically aligned to center. Meaning the internal table is at the vertical center of the cell of the outside table.
So, this is the code:
.tabelaTresLinhasInterna {
border: 0px;
table-layout: fixed;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
margin:0 auto auto auto;
}
.tabelaTresLinhasInterna tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
}
.tabelaTresLinhasInterna tr:nth-child(1) {
height:80px;
}
.tabelaTresLinhasInterna tr:nth-child(2) {
background-color: #000;
height:40px;
}
.tabelaTresLinhasInterna tr:nth-child(3) {
height:auto;
}
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: #fafafa;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td{
border: 0px;
width: 33%;
}
.tabelaTripla td{
border: 0px;
width: 33%;
text-align: center;
vertical-align: middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #eaeaea;
border-radius: 20px;
background-color: #fdfdfd;
}
<table class="tabelaTripla">
<tr>
<td>
<table class="tabelaTresLinhasInterna">
<tr><td>INTERNAL TABLE LINE 1</td></tr>
<tr><td>INTERNAL TABLE LINE 2</td></tr>
<tr><td>INTERNAL TABLE LINE 3</td></tr>
</table>
</td>
<td>COLUMN 2</td>
<td>COLUMN 3</td>
</tr>
</table>
The internal table is ignoring the CSS...
Add vertical-align: top; to the outer table's td.
For the row heights, apply the height to the td instead of the tr, i.e. .tabelaTresLinhasInterna tr:nth-child(1) td { height:80px; }.
.tabelaTresLinhasInterna {
border: 0px;
table-layout: fixed;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
margin: 0 auto auto auto;
}
.tabelaTresLinhasInterna tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
}
.tabelaTresLinhasInterna tr:nth-child(1) td {
height: 80px;
}
.tabelaTresLinhasInterna tr:nth-child(2) td {
background-color: #000;
height: 40px;
}
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: #fafafa;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th,
td {
border: 0px;
width: 33%;
}
.tabelaTripla td {
border: 0px;
width: 33%;
text-align: center;
vertical-align: top;
word-wrap: break-word;
padding: 40px;
border: 1px solid #eaeaea;
border-radius: 20px;
background-color: #fdfdfd;
}
<table class="tabelaTripla">
<tr>
<td>
<table class="tabelaTresLinhasInterna">
<tr>
<td>INTERNAL TABLE LINE 1</td>
</tr>
<tr>
<td>INTERNAL TABLE LINE 2</td>
</tr>
<tr>
<td>INTERNAL TABLE LINE 3</td>
</tr>
</table>
</td>
<td>COLUMN 2</td>
<td>COLUMN 3</td>
</tr>
</table>
The thing is that your styles for .tabelaTripla td are inherited by tds of the internal table.
So that:
minimal height of the first row is 80px, but inner content makes it bigger because of inherited padding: 40px
same reason for height. Background color applies but covers with background-color: #fdfdfd; from the rules mentioned above
it's all right here
same problem, vertical-align: middle; inherited from top-level td
Try to use more concrete and specific rules.
padding is forcing the height of the cells... yo have to change the td display property in something like "display:block" but other modifications are needed.
By setting the padding of the inner table to zero, the height of the cell dosn't have a "minimum height"
.tabelaTripla .tabelaTresLinhasInterna td {
padding:0px
}
My advice is to use a grid system and you will get this thing in a responsive way and especially with less effort.
.tabelaTresLinhasInterna {
border: 0px;
table-layout: fixed;
font-size: 0.9em;
line-height: 1.5em;
text-align: center;
margin:0 auto auto auto;
}
.tabelaTripla .tabelaTresLinhasInterna td {
padding:0px
}
.tabelaTresLinhasInterna tr {
padding: 0px;
margin: 0px;
word-wrap: break-word;
box-sizing:border-box;
}
.tabelaTresLinhasInterna tr:nth-child(1) {
height:80px;
}
.tabelaTresLinhasInterna tr:nth-child(2) {
background-color: #000;
height:40px;
}
.tabelaTresLinhasInterna tr:nth-child(3) {
height:auto;
}
.tabelaTripla {
border: 0px;
table-layout: fixed;
width: 100%;
border-collapse: separate;
border-spacing: 20px;
font-size: 0.7em;
line-height: 1.3em;
background-color: #fafafa;
}
.tabelaTripla tr {
padding: 40px;
margin: 40px;
}
.tabelaTripla th, td{
border: 0px;
width: 33%;
}
.tabelaTripla td{
border: 0px;
width: 33%;
text-align: center;
vertical-align: middle;
word-wrap: break-word;
padding: 40px;
border: 1px solid #eaeaea;
border-radius: 20px;
background-color: #fdfdfd;
}
<table class="tabelaTripla">
<tr>
<td>
<table class="tabelaTresLinhasInterna">
<tr><td>INTERNAL TABLE LINE 1</td></tr>
<tr><td>INTERNAL TABLE LINE 2</td></tr>
<tr><td>INTERNAL TABLE LINE 3</td></tr>
</table>
</td>
<td>COLUMN 2</td>
<td>COLUMN 3</td>
</tr>
</table>
I'm trying to make it so that images in cells in an html table expand when you hover over them. I want this to be universal to all tables on my website. Here's my code so far:
td img {
height: 150px;
}
td img:hover{
height: 175px;
}
This code makes the images appear at their correct height, but nothing hapens when I hover over them. Obviously I'm doing something wrong, but what is it?
Consider defining the width and height of the cells and adjust the image within those parameters. This way the rows don't shift around when you hover -- change table image size on hover
html {
padding: 50px;
}
table {
width: 600px;
padding: 10px;
background: #FFF;
border: 1px solid #BBB;
}
th {
padding: 10px;
}
td {
vertical-align: middle;
text-align: center;
padding: 5px;
border: 1px solid #DDD;
}
td:first-child {
width: 50px;
}
td:last-child {
width: 200px;
height: 200px;
}
td img {
width: 75%;
height: auto;
}
td img:hover{
width: 90%;
height: auto;
}
<table>
<thead>
<th>Image Title</th>
<th>Image</th>
</thead>
<tbody>
<tr>
<td>Image 1</td>
<td><img src="http://www.logoeps.net/wp-content/uploads/2013/06/stackoverflow_logo.jpg" /></td>
</tr>
</tbody>
</table>
you can do it with CSS
td:hover img{
height:175px;
}
you can use jQuery for this also :
$('td img').on('mouseenter',function(){
$(this).css({
'height':'175px'
});
});
* {
margin: 0;
padding: 0;
}
img {
height: 150px;
width: auto
}
td:hover img {
background: red;
height: 200px;
}
<table>
<tr>
<th>Title</th>
<th>Image</th>
</tr>
<tr>
<td>Image Title</td>
<td><img src="https://torange.biz/photofx/5/8/image-profile-picture-beautiful-exotic-flower-5532.jpg" alt=""></td>
</tr>
</table>