Table with 100% width with equal size columns - html

I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?


If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.


<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns


ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}


Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.


table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax

Related

Setting the height of a table in HTML has no effect

Why does this table height not function?
<table border=1 bgcolor="green" width=80% height="30%">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td >
2
</td>
</tr>
</table>
http://jsfiddle.net/zQNS4/

just add the following to your css:
html, body{
height: 100%;
}
As other said, a table doesn't have a height-attriute, but most browsers intrepet that anyway. you can see the result on jsfiddle.
The reason you need to do this is that the parent element of anything that should have a height in % must have a height too (as Shadow Wizard said: "30% of what exactly?" - the parent has to have a height).

The table tag does not contain a height attribute. Try setting the height of the table using CSS styling.
table{
height: 30%;
}

<div style="height: 200px; overflow-y: scroll;">
<table border=1 bgcolor="green">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td>
2
</td>
</tr>
</table>
</div>

I just had the same issue.
I have table inside a container ( div config-table ), just setting height didn't work for me. I had to set overflow: auto ( for my case auto was needed ) and now work
.config-table {
height: 350px;
overflow: auto;
}

How to force min-height on table

I have this code :
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
</table>
As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.
For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).
So, how can I take the whole height on the td trought min-height?
Also, tried putting min-height:60px; on tr, but nothing change...

min-height doesn't work for table elements:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
I can only assume this applies to td and tr as well.
What should always work is wrapping the content in a div, and applying min-height to that, as shown in this JSFiddle:
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
<div style="min-height: 60px; background-color: green">
This is my text that I need in 2 lines
</div>
</td>
Edit: You say this doesn't work with Outlook.
Alternative idea: Place a 60 px tall image in the td, and make it float: left:
<td>
<img src="..." style="float: left">
</td>

Use <td height="60"> not CSS height or min-height
For HTML email set your table cell as <td height="60"> and it will treat that as the min-height. If your content is more than 60px, it will expand accordingly.

Put a DIV in the cell, style the DIV instead.

Min-height doesn't works on tables.
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality: min-height & max-height
But these can't be used on non-replaced inline elements, table columns, and column groups.

You can't set min-height and min-width, but you can use some CSS3 for achievements this same effect.
.default-table table {
border-collapse: collapse;
}
.default-table table td {
padding: 0;
}
.default-table tr:before {
width: 0px;
content: '';
float: left;
overflow: hidden;
height: 28px;
font-size: 0;
}
.default-table {
overflow: hidden;
}
<div class="default-table">
<table>
<tbody>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>stevesmith#gmail.com</td>
</tr>
<tr>
<td>Jone</td>
<td>Polanski</td>
<td>jonep#gmail.com</td>
</tr>
</tbody>
</table>
</div>
but if u having collapse or padding in td. You must give for .default-table table minus margin-left.

HTML :
<table></table>
CSS :
table{
height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
min-height:100vh;
}
That's how I always resolve this problem ...

Add display block
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">

Here's a solution that works in Outlook (tested) and other e-mail clients:
<td style="mso-line-height-rule:exactly;line-height:300px;"> </td>
This is cleaner than using an image, which could negatively affect your spam score, and does the exact same thing.
If you have other content in the <td> that you don't want to have that line height, you can just wrap the non-breaking space in a <span> and set the line-height on that tag:
<td><span style="mso-line-height-rule:exactly;line-height:300px"> </span>**Other content without 300px line-height here**</td>
The reason height or min-height works on <div> tags and not <td> is because <td> are set to display:table-cell and do not respect height the same way that display:block (<div>) elements do.

I have resolved this issue by adding display:block; to its style as
<td style="display:block; min-height:200px;">

min-height does not work in td, Set height that will work like min-height and automatic increase height if needed. That is worked for me

Here is a solution that does not depend on the height in pixels. It works in all email clients:
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
<td style="font-family:Arial;font-size:12px;line-height:14px;">
<br/><br/>
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
The solution works by adding a zero-width column with two lines to the right of the first one. It uses the  character, which is a non-breaking zero-width space.

It may be reviving a 2012 post, for those who searched and found this post like me:
Note: Check these addresses for the email client support before using this method, at the time of writing this answer, the support was around 50% -ish.
E-mail client support range of :first-child
E-mail client support range of ::before
table tr:first-child td:before {
min-height: 100px;
display: block;
content: ""
}
<table border="1">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>

What I found !!!, In tables CSS td{height:60px;} works same as CSS td{height:60px;}

Prevent a table in overflow:auto div from shrinking

I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.
This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:
<div style="width: 1000px; overflow-x: auto;">
<table>
<tr>
<td style="width:400px;">
This
</td>
<td style="width:400px;">
Should
</td>
<td style="width:400px;">
Scroll!
</td>
</tr>
</table>
</div>
Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?

Works if you set the width on the table itself.
<table style="width:1200px;">
The td will always shrink to the necessary size, they won't push the table wider in that situation.

using CSS can done like below but make sure you use id or class for applying css if you have more then one table or div.
<style>
div { width: 400px; overflow-x: auto; }
table { width:1200px; }
table td { width:400px; }
</style>
<div>
<table>
<tr>
<td>
This
</td>
<td>
Should
</td>
<td>
Scroll!
</td>
</tr>
</table>
</div>

This should help
<table style="width: max-content;">

How to get table data content to next line?

I have a table of width 100% (fit to screen ) with 3 <td> in that. In 2nd <td> I have some content like this addfdss212s1ssff54f5df4d54s54dsf64dsfsadjvmckjsadkjkdflsadfkksdalasdflsdfkasd6f465, this content does not contain any space. I have given 70% of width to the 2nd <td> but when the characters of content increases that 2nd <td> expand and layout get disturb. Is it possible to get increased character to next line in width of 70% with the help of CSS? (see below in the code).
<table width=”100%”>
<tr>
<td width=”10%”>Result1</td>
<td width=”70%”>addfdss212s1ssff54f5df4d54s54dsf64dsfsaDjvmckjs
adkjkdflsadfkksdalasdflsdfkasd6f465
</td>
<td width=”20%”>Comments</td>
</tr>
</table>

Try:
<table style="table-layout: fixed">
<tr><td style="word-wrap:break-word">LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord</td></tr>
From: https://stackoverflow.com/a/1883702/585552

I think the rule you're probably looking for is:
word-wrap: break-word;

CSS Table Layout

I have an HTML table with 3 columns and amount of text in each column is variable. I would like to set some rules on the layout of the table but Im not sure how to do that in CSS.
Title | Author | Publisher
The default ratio is 50%, 25%, 25% for each column. The goal is to keep everything on a single line if possible. The author and publisher columns have a higher priority to be single lined that the title column.
UPDATE: The problem is when the amount of text exceeds the width of a single line.

You need to change the percentages to defined widths(px). Define the width of the table, as well as give each <TD> it's own width definition that together equal the width of the table. Best way would be to create a CSS class for both, and just assign the class to each element. Something like this, very general obviously.
.table{
width:500px;
}
.tablecell_1{
width:200px;
}
.tablecell_2{
width:200px;
}
.tablecell_3{
width:100px;
}
<table class="table">
<tr>
<td class="tablecell_1">
</td>
<td class="tablecell_2">
</td>
<td class="tablecell_3">
</td>
</tr>
</table>

You can create a class for each of the columns.
<th class="title">Title</th>
<th class="author">Author</th>
<th class="publisher">Publisher</th>
And make css specific for each one.
.title{
}
.author{
}
.publisher{
}

Define a width for the table and then add a class on <td> tags with `width:auto;
.table{
width:900px;
}
.cell{
width:auto;
}
And here your table
<table class="table">
<tr>
<td class="cell">
</td>
<td class="cell">
</td>
<td class="cell">
</td>
</tr>
</table>
Let me now if this is what you wish