HTML image won't fill table - html

I have a 2x3 table, image on the left and text on the right with that layout staggered down the table.
When inserting an imagine in the table row it wont fill the section, it adds padding to the edges and is smaller than the table data next to it even though it is the size of the table row. The table data which contains text and a background color is bigger. Spacing within the table is off.
Any way to make the image fill the whole table cell and not add the extra space?

You can give the td a background image with the background-image CSS property.
td{
border: 1px solid black;
position: relative;
height: 50px;
width: 50px;
}
tr{
border:2px solid grey;
}
.imgcontainer{
width: 150px;
height: 100px;
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
<table>
<tr>
<td class="imgcontainer">
</td>
<td>Table Cell</td>
</tr>
</table>

Something like this? :D
table {
width: 100%;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 0px;
vertical-align: top;
}
table td img {
display: block;
width: 100%;
}
<table>
<colgroup>
<col width="50%"/>
<col width="50%"/>
</colgroup>
<tr>
<td>Text</td>
<td><img src="https://via.placeholder.com/100x30"></td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/200x20"></td>
<td>Text<br/>Over<br/>Multiple<br/>lines</td>
</tr>
<tr>
<td>Text</td>
<td><img src="https://via.placeholder.com/400x50"></td>
</tr>
</table>

Related

Why does the cell my image is in not resize with my image?

I'm trying to make a table with 4 cels and in each cell an image. I'm trying with a test image now but whenever I put the size of the image in % (I want the image to resize with the window) the cel the image is in stays the width of the original image. So the image resizes, but the cel the image is in does not. Only width though, the height does resize. If I put the image size in px, it does work. But that's not what I want... I tried putting the image in my html code, but I get the same result. So I want the image size to be in % so that when you change the width of the window, the image resizes with it.
This is my code:
table,
tr,
td {
border: 1px solid black;
margin-left: 10%;
margin-bottom: 20%;
}
td {
margin: auto;
padding: auto;
}
.image1 {
background: url(../afb/test.png);
width: 50%;
height: 50%;
}
<!--pictures-->
<table>
<tr>
<td><div class="image1"></div></td>
<td>pic 2</td>
</tr>
<tr>
<td>pic3</td>
<td>pic4</td>
</tr>
</table>
I hope that this code will help you to solve this issue. Best regards.
table{
position:static;
border-collapse: collapse;
margin: auto;
margin-bottom: 20%;
width:90%;
height:90%;
}
tr , td{
border-collapse: collapse;
border:1px solid black;
margin-left: 10%;
margin-bottom: 20%;
}
td{
margin: auto;
padding: auto;
}
div.image1 {
position:relative;
content: url(http://pirson.me/stackOverSamples/medias/brume.jpg);
width: 100%;
height: 100%;
}
<table>
<tr>
<td>
<div class="image1"></div>
</td>
<td>
pic 2
</td>
</tr>
<tr>
<td>
pic 3
</td>
<td>
pic 4
</td>
</tr>
</table>

Adjust HTML table colum size both with percent and fixed sizes?

I want to create a table with the following widths of columns.
Is it possible to use both percents and absoulte widths as shown in my graphic?
This is because some columns make no sense below a certain width and always need the same width and others are more flexible.
Here you go:
#fixed{
table-layout:fixed;
}
td{
border:1px solid red;
}
td:nth-child(even){
background-color: grey;
}
<table id="fixed" border="0" style="width:100%;border-collapse:collapse;">
<tr>
<td style="width:50px;">1</td> <!--Fixed width-->
<td style="width:50%">Title</td>
<td style="width:50%">Interpret</td>
<td style="width:20px">1</td>
</tr>
</table>
What I could understand, you can achieve this by applying styles with table i.e table-layout: fixed; and width:100%;. Also width of td using px and %. According to your design, you are using four columns and I wrote code for the four columns;
Following would be your CSS;
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 50px;
}
td:last-child {
width: 20px;
}
.second-column {
width: 50%;
}
.third-column {
width: 50%;
}
td:nth-child(odd) {
background-color: grey;
}
td:nth-child(even) {
background-color: silver;
}
<table>
<tr>
<td>1</td>
<td class="second-column">2</td>
<td class="third-column">3</td>
<td>4</td>
</tr>
</table>
Hope this is what you required.

Applying width to table cell when colspan is applied

Even though i have applied table-layout fixed, table td cell are not taking width,
is it possible to apply width for td cell without changing table display property.
HTML:
table {
width: 500px;
border: 1px solid #dadada;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid #dadada;
}
.td-1 {
width: 480px;
}
.td-2 {
width: 200px;
}
.td-3 {
width: 290px;
}
.td-4 {
width: 100px;
}
.td-5 {
width: 390px;
}
<table>
<tr>
<td colspan="4" class="td-1">This is Amazing</td>
</tr>
<tr>
<td colspan="2" class="td-2">This is beautiful</td>
<td colspan="2" class="td-3">This is kinda of nothing</td>
</tr>
<tr>
<td class="td-4">This is Awesome</td>
<td colspan="3" class="td-5">This is Sick</td>
</tr>
</table>
Tables take their column widths from the first row. With this in mind I would approach this by creating an initial empty ghost row which does not have any colspan. This allows you to specify the exact width of each column. The row can be 1px high so it is barely visible.

How to work with HTML table and make multiple rows with only one <tr>?

I need to change an html <table> in order to make it responsive,
But I want to work only with css
table{
width:100px;
height:100px;
background:green;
}
.a{
width:100% !important;
background-color:Red;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
What I want :
Without changing HTML, I want to have the AAA for the 100% width of the screen, and "BBB" + "CCC" below (under the AAA line with BBB : 50% width, and the "CCC" too in width)
I'm trying with no success, any help please ?
Are you against changing the default display: table; of the table ?
If no, you can do like this
.a{
width:100%;
background-color:Red;
}
.b, .c { width: 49%; display: inline-block }
table, tbody, tr, td { display: block; }
Fiddle
You can use float but that sort of negates the point of using a table in the first place.
If this isn't tabular data (and the layout suggests it's not) then you really should be looking for an alternative HTML structure.
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
width: 100%;
}
td {
width: 110px;
float: left;
width: 50%;
border: 1px solid grey;
}
td.a {
width: 100%;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>

CSS - fixed height on tr and fixed height on table?

I need to have table that has rows with fixed height and that table itself must be of fixed height.
For example all rows would be of 8px height and table would be of height 400px. If there would be less rows than total height of table, then remaining part of the table should be like a gap.
But css automatically readjusts row height if I set fixed height on table.
I need table to look like this:
|row |cont |
|row |cont |
|row |cont |
| |
| |
| |
|End of table|
I tried this:
CSS:
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
HTML:
<table class="t-table">
<tr style="line-height: 8px">
<td>A</td>
<td>B</td>
</tr>
<tr style="line-height: 8px">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Or you can check it here: https://jsfiddle.net/utrwqfux/
P.S. So if I force height on table it will ignore height on rows. Last tr was without height, so the idea was for it to re-size automatically filling empty gap.
You can set height:8px to the first and second tr. And remove the middle border from the empty cells in the last tr.
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
}
.t-table td {
border: 1px solid black;
}
.t-table td:empty {
border-left: 0;
border-right: 0;
}
<table class="t-table">
<tr style="line-height: 8px; height: 8px;">
<td>A</td>
<td>B</td>
</tr>
<tr style="line-height: 8px; height: 8px;">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Basically I did this by creating the table in CSS and not in HTML. This give a bit more control.
HTML:
<div class="table">
<div class="tr">
<div class="td">A</div>
<div class="td">B</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
</div>
</div>
CSS:
.table {
background: rebeccapurple;
display: table;
height: 400px;
table-layout: fixed;
width: 400px;
}
.td {
background: hotpink;
display: table-cell;
height: 8px;
width: 200px;
}
Live example: http://codepen.io/WartClaes/pen/mVxdQg?editors=1100
The only issue here is that the td's will be higher then 8px since their content is bigger then that. Is 8px the actual height?
I agree with Wart Claes on display divs as table elements vs using old school table layout. But the problem you're running into is that the browser is adding a tbody element into your table. This element is forcing the row height. To fix this there are two ways.
1) Set the tbody to display as block, this will make the browser disregard its display properties and do exactly as you want.
https://jsfiddle.net/benneb10/utrwqfux/1/
tbody{
display:block;
}
2) Set the table height of the table with the tbody:
tbody{
height:400px;
overflow:auto;
overflow-x:hidden;
border: 1px solid black;
}
However, doing this won't make your table 400px as you want. It will force the tr to be exactly 8px though.
https://jsfiddle.net/benneb10/utrwqfux/2/
This would be the proper solution for extending the table to a certain height by keeping the vertical lines.
CSS
table {
border: 1px solid black;
min-height: 400px; /* table height here */
border-collapse: collapse;
}
td {
border: 1px solid black;
}
tr {
height: max-content;
}
tr:last-child {
height: auto;
}
Live Example: https://jsfiddle.net/sandy912/20z45kaj/3/
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
display: table-cell;
}
td {
border: 1px solid black;
padding:5px;
}
https://jsfiddle.net/pf8g49h2/