I am using the trick of assigning a small width to a table cell for it to wrap its content so the following works fine (I want the second and third cell to be assigned their width automatically according to their content):
<table style="width:100%;">
<tr>
<td style="width:1px;">11111111</td>
<td>1111111111111111</td>
<td>11111111</td>
<td style="width:1px;">11111111</td>
</tr>
</table>
But in my project, I am going to animate the width of the cell content to zero so I want the cell to be also of "0" width because I have a hover styling on the cell and even 1 px will trigger this styling when the mouse hovers over it. But assigning the cells 0 width instead of 1px is totally ignored.
One solution I thought of was binding the hover styling to the div inside the td. But is there a way to make the cell width really "0"?
try to use table-layout:fixed and width:0px on the td
<table style="width:100%;table-layout: fixed;">
<tr>
<td style="width: 0px;"> </td>
<td>1111111111111111</td>
<td>11111111</td>
<td style="width: 0px;"></td>
</tr>
</table>
Related
I have a table with a format like this
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item">
<b>P</b>
</td>
<td className="grid-item">
<div>✔ 17/10/2019</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and when click a external button, it turns something like this:
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<b>P</b>
</div>
</td>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<div>✔ 17/10/2019</div>
</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and the div "clickeable-cpopup" has a onClick function and it needs to fill all space of its td parent, height and width, otherwise i click the td instead of the div and nothing happens.
the "grid-item" has padding: 0 and i tried the solution of apply display: flex to the "grid-item", it works in filling the space but the table format gets messed up.
Also I tried with better results giving position: relative to the "grid-item" and absolute to both "clickeable-cpopup" and "content". The clickeable div use all space in the td but then the cell that contains the date doesnt adjust to its content (the width of the cell is smaller that the lengh of the date)
How could I achieve this? I would like to avoid make the td clickeable.
Fixing the cell size is not a good option, a column that only contains <b>P</b> should be smaller thant a column that contains both P and date, an P could become a date and vice versa and some headers of the first column may use 2 lines of height.
And of course neither width: auto nor 100% work since the "grid-item" doesn't have a fixed size
I'm using twitter bootstrap for my CSS on a project I'm working on.
as you can see in the image I've added, the width of my th cell is larger than the actual text I've added in it (which my bootstrap css automatically truncates). I want the red lines to start at the same point my blue line does. But this is being blocked from doing so because of the size of my th cell.
the code for my table is included below:
<table class="table bg-light table-sm table-responsive" style="width: 100%">
<tbody style="width:100%">
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">10.1</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">UNKNOWN</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
</tbody>
</table>
When I change the widths in the div/th cells and all parent tags to a pixel value instead of a percentage, the table does what I want (reduce the th cells size so that the red bars can start where the blue bar starts, text inside the cell becomes truncated) but when it is percentage values, the th cells stay as wide as the largest text in the column (in this case where it says "UNKNOWN").
You have to understand that HTML table will occupy the space it needs to display all the content inside it (it won't truncate it). So, if the table content asks for 2000px the table will respect it. Therefor, your cell width presented in percents will respect the table width. The only way you can really control the table cell width is to change the table layout:
table-layout: fixed;
But please note, it won't behave as a table it used to be. More about fixed table layouts here.
So I have these tables that I'm trying to make for an email template, and these three columns which have a float property in order to stack them one bellow another when I resize the window.
The thing is that while it looks good at maximum size and minimum size (at maximum they are next to each other, at minimum they are one bellow another, as intended), in between the third column moves below the first while the second remains next to the first, and after further resizing the second column then changes it's position below the first column and the third column moves further away from the second one. What I wish to know is if there is a way to make them move in a certain order, like the first one to move below should be the second column, and only after that the third. Or even better would be if they moved all at once!
Also, I am very curious as to why are the texts moving upward inside the cells when I give them the float property, me preferring them to remain vertically aligned in the center, as they were before making them float.
Note: because this is intended for emails, I had to use all my css styling inline as the server I use does not recognize the style tag. Also the max width for the table is of 600px
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;">
<tbody>
<tr>
<td class="placeholder" style="width: 180px;float:left;">
Description:
</td>
<td class="links" style="width: 275px; float:left;">
very long link
</td>
<td class="buttons" style="width: 85px; float:left;">
button
</td>
</tr>
</tbody>
</table>
You need to enclose table cell item (placeholder, links and buttons) in a different Html.
See/try the following code:
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%;margin-left: auto;margin-right: auto;">
<tbody>
<tr>
<td>
<div style="width:180px;display:inline-block" class="placeholder">Description:</div>
<div style="display:inline-block">
<div style="width:275px;display:inline-block" class="links">very long link</div>
<div style="width=85px;display:inline-block" class="buttons">button</div>
</div>
</td>
</tr>
</tbody>
</table>
Items are in one table cell, so the table has one column, with the same width.
The description item is enclosed in div with display:inline-block.
Both links and buttons are enclosed in another div with display:inline-block.
When You resize window the second div (that enclose links and buttons) wrap and take links and buttons togheter on the second row.
If the table has more columns you need to enclose all columns in that way.
I want to change the size of my table cell to be smaller in height. The first cell has an image of 300px width. I'd like the second cell to have a height of 100px. I've tried html solutions like <td height="10"> but that hasn't worked. What I'm looking to do is have an image on the left and a text block on the right.
<table>
<tr>
<td> <img id="plattOverlook" src="images/Scenic/plattOverlook.jpg"/> </td>
<td style="background: white"> This is an overlook. </td>
</tr>
</table>
In a simple table adjacent table data cells will always be the same height unless you use
rowspan=*
Have a look at this page (about half way down) -
http://www.htmlcodetutorial.com/tables/_TD_COLSPAN.html
You will have to use rowspan for the image.
Other wise I don't think there's any possible solution
Use rowspan.
Check this fiddle:
http://jsfiddle.net/10z7ya28/
td {
width: 100px;
height: 50px;
}
I have a HTML table
Required details are mentioned in JSFiddle.
This is working well on Firefox, but it's not on Chrome and IE!
what's wrong with them? why they expand the cell in the last row which has a fixed height, instead of second row which is the only cell with not-determined height in first column.
Here is the HTML code:
<table style="width: 100%;" dir="rtl" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 100px; width: 176px; background:blue">
this is a fixed size cell
</td>
<td rowspan="3" style="background:gray; height: 360px;">this cell is spanned 3 rows<br /> lots of content may be placed here</td>
</tr>
<tr>
<td style="background:red">this should expand depending on gray region</td>
</tr>
<tr>
<td style="height: 46px; background:blue">this is a fixed size cell</td>
</tr>
seems like height algorithm for your case is underfind. You want td {height: auto} to extend all available space, but
A 'height' value of 'auto' for a 'table-row' means the row height used
for layout is MIN. MIN depends on cell box heights and cell box
alignment....In CSS 2.1, the height of a cell box is the minimum height required by the content
and finaly
CSS 2.1 does not specify how cells that span more than one row affect
row height calculations except that the sum of the row heights
involved must be great enough to encompass the cell spanning the rows.
see 17.5.3 Table height algorithms