I have three columns. The last two I want to make as narrow as the their contained data and the first column can take the rest of the width (table has 100% width).
How can you do this using CSS? Right now the columns on the right look silly with extra space. Ideas?
Just give the first column a width of 100% and if necessary give the cells in all other columns a white-space: nowrap to avoid their content being wrapped (again, only if necessary).
E.g.
<table>
<tr><td class="first">first</td><td>second</td><td>third</td></tr>
<tr><td class="first">first</td><td>second</td><td>third</td></tr>
<tr><td class="first">first</td><td>second</td><td>third</td></tr>
</table>
with
table { width: 100%; }
table td.first { width: 100%; }
Or the modern way if you don't bother about IE6 users:
table { width: 100%; }
table td:first-child { width: 100%; }
(so that you can remove class="first")
I just answered this with a little different approach with this more detailsed answer in a similar question, basically:
Add the class shrink to columns you want to have as narrow as possible
<table>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>
With this css:
td.shrink {
white-space: nowrap;
width: 1px;
}
With this you can define multiple columns to have minimum width on one line but the other's width stays dynamic (including possible line breaks).
Example Snippet
table {
width: 100%;
}
td {
padding: 10px;
}
td.shrink {
white-space: nowrap;
width: 1px;
}
<table>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
<tr><td>first</td><td class="shrink">second</td><td class="shrink">third</td></tr>
</table>
Related
This question is already on stackoverflow. But the solutions are not working for me. Actually I'm working on an Angular project. I want to align Mode of comparison and the corresponding Dropdown in the middle with respect to each other. Here is the widget that I'm creating. I've clearly marked that part in the image:
Here is my HTML:
Note: pt-label, dls-combobox and dls-option are my custom made angular components.
<table>
<tbody>
<tr class="my-row">
<td class="first-col1">
<div class="comparing-switch1">
<pt-label>Mode of comparison </pt-label>
</div>
</td>
<td class="second-col1">
<div class="comparing-label1">
<dls-combobox placeholder="Time average">
<dls-option>
<pt-label>Time average</pt-label>
</dls-option>
</dls-combobox>
</div>
</td>
</tr>
</tbody>
</table>
and here is my CSS:
.my-row {
background: cornflowerblue;
}
.first-col1 {
background: magenta;
width: 50% !important;
}
.second-col1 {
width: 100%;
background: blueviolet;
padding-bottom: 10px;
}
table.stats tbody tr:nth-child(even) {
vertical-align: middle !important;
}
table.stats tbody tr {
vertical-align: middle !important
}
Even If I try to set it through margin and padding then both of them gets shifted even when the class names are different. One more thing I noticed. When I inspect the element table. When I remove vertical-align: baseline from these two places (as marked in the picture below) the my problem is solved:
What is wrong with my code. Please correct me.
Here vertical-align: baseline property is applied to the table. vertical-align: middle !important is applied for tr element.
since table has that property tr itself aligned in baseline. try adding vertical-align: middle for the table
Fiddle: http://jsfiddle.net/oh78n5r5/17/
I am attempting to render a parenthesized expression using a table with one row and three cells: left, middle and right, where left and right are parentheses and middle is the expression. I would like both the parentheses and the expression text to be properly vertically aligned with an adjoining span representing a function name. So the final result should look like: f(x).
My current approach is to set vertical-align: middle on the table. This aligns the parentheses fairly well, but unfortunately, in chrome the expression text is below the function name.
Is there any css that will allow me to use the HTML I am currently using and will work cross-browser? (The HTML is good because it will allow parentheses to grow with large expressions like fractions).
The html I am using is the following:
<span>f</span>
<table class="paren">
<tr>
<td class="left"></td>
<td class="mid"><span class="x">x</span></td>
<td class="right"></td>
</tr>
</table>
my current css is (paren images are stubbed out):
.left, .right { background-color: gray; }
.paren { display: inline-table; border-collapse: collapse; border-spacing: 0; }
.paren .left, .paren .right { padding: 0px; width: .35em; }
.mid{ }
body { font-size: 24px }
Please check this: jsFiddle. This is the new CSS which I added:
.f {
vertical-align: middle;
}
.mid {
text-align: center;
}
HTML table ignoring element-style width
I have an HTML table where certain cells have very long text contents.
I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width.
Is there any way to force the table to respect this width?
Thanks!
JSFiddle: http://jsfiddle.net/sangil/6hejy/35/
(If you inspect the cell you can see the the computed width is different than the element-style width)
HTML:
<div id="tblcont" class="tblcont">
<table id="pivot_table">
<tbody>
<tr>
<th id="h0" >product</th>
<th id="h1" >price</th>
<th id="h2" >change</th>
</tr>
<tr>
<!-- this is the cell causing trouble -->
<td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td id="c01" >3212</td>
<td id="c02" >219</td>
</tr>
<tr>
<td id="c10" >Acer</td>
<td id="c11" >3821</td>
<td id="c12" >206</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tblcont {
overflow: hidden;
width: 500px;
}
table {
table-layout: fixed;
border-collapse: collapse;
overflow-x: scroll;
border-spacing:0;
width: 100%;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
th {
height: 50px;
}
​Javascript:
$(document).ready(function() {
// THIS LINE HAS NO EFFECT!
$('#c00').width(30);
});​
I can see from your fiddle that you already have a good grasp on how to get the word truncation and such in-place. I think you may find it useful to do something like the following:
<table>
<colgroup>
<col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
<col />
<col />
</colgroup>
<!-- the rest of your table here -->
</table>
This method works with the HTML specification in a way that is compliant - and will resize the whole column. If you instead change the display of the cell to inline-block, as mentioned above, what will happen is that you take the cell out of the table's flow - and other stylistic changes may cease working.
By styling the entire col using the code above, you use the table element's table-layout: fixed styling to your advantage instead.
Additionally - I noticed that you have the cells set up to use text-overflow: ellipsis; Check out this article on quirksmode to understand why it's not working. The fix you need is to make the following edit:
th, td {
border: solid #4682B4 1px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
white-space: nowrap; /* Add this line */
}
Table cells by default fit to their content and ignore your width.
Other possibility to the already provided answers:
Surround the text with some other container:
<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
And change its width:
$('#c00 div').width(30);
You have a few issues:
table-layout: fixed tells the columns to be equal.
Then, even if you take that out, your text is wider than 30 pixels, with no spaces, so it's not going to go narrower than that "aaaaaaaaaa" etc. You'll need to make the text smaller, or add spaces.
Finally, width should be "30px" (in quotes).
Hope that helps.
Try this:
$('#c00').css("width","30px");
or this:
<td id="c00" style='width:30px'>
If you are using IE, you may need to have Compatability Mode on. Also, make sure you are importing the proper jQuery plugin.
I have a condition,
shown in this image:
It is only allow to use very simple HTML TABLE element to solve.
I wonder my this solution is it the best already?
http://jsbin.com/exazif/
to look the code: http://jsbin.com/exazif/edit#javascript,html
If you must use a <table>, this method is good. However you should not write colspan="250". Colspan is not designed for that. If you do not have to use a <table> you could use floated div's.
To be honest, there is a big debate about what is better: tables or divs. Read more about it here.
This is pretty good tutorial on basic tables.
You should give your td tags ids and then use css instead of the outdated html-attributes.
css
table {
border: none;
width: 800px;
border-collapse: collapse; /* instead of cellspacing */
}
td {
padding: 0;
}
td#first_first {
background-color: 'red';
width: 400px;
}
td#first_second {
background-color: 'blue';
width: 400px;
}
And in your html
<table>
<tr>
<td id="first_first">400x200</td>
<td id="first_second">400x200</td>
</tr>
...
</table>
Colspan means for how many columns a td cell extends. So in your code it's not used right. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?
td.block {
border: 1px solid black;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
I realize I could hard code the width, but I'd rather not do that, as the content which will go in that column is dynamic.
Looking at the image below, the first image is what the markup produces. The second image is what I want.
I'm not sure if I understand your question, but I'll take a stab at it:
td {
border: 1px solid #000;
}
tr td:last-child {
width: 1%;
white-space: nowrap;
}
<table style="width: 100%;">
<tr>
<td class="block">this should stretch</td>
<td class="block">this should stretch</td>
<td class="block">this should be the content width</td>
</tr>
</table>
Setting
max-width:100%;
white-space:nowrap;
will solve your problem.
For me, this is the best autofit and autoresize for table and its columns (use css !important ... only if you can't without)
.myclass table {
table-layout: auto !important;
}
.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
width: auto !important;
}
Don't specify css width for table or for table columns.
If table content is larger it will go over screen size to.
There are many ways to do this!
correct me if I'm wrong but the question is looking for this kind of result.
<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>
The first 2 fields will "share" the remaining page (NOTE: if you add more text to either 50% fields it will take more space), and the last field will dominate the table constantly.
If you are happy to let text wrap you can move white-space:nowrap; to the style of the 3rd field will be the only way to start a new line in that field.
alternatively, you can set a length on the last field ie. width:150px, and leave percentage's on the first 2 fields.
Hope this helps!
Setting CSS width to 1% or 100% of an element according to all specs I could find out is related to the parent. Although Blink Rendering Engine (Chrome) and Gecko (Firefox) at the moment of writing seems to handle that 1% or 100% (make a columns shrink or a column to fill available space) well, it is not guaranteed according to all CSS specifications I could find to render it properly.
One option is to replace table with CSS4 flex divs:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
That works in new browsers i.e. IE11+ see table at the bottom of the article.
First, setting
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
ensures that your your table cells will stretch.
Now you only need
td.fit {
width: 0;
min-width: fit-content;
}
on your fitting cells.
Note that now the table will only overflow in width if content of all fitting cells is too much to fit into a table-width of 100%.
table {
white-space: nowrap;
width: 100%;
}
td {
border: 1px solid black;
}
td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
td.fit {
width: 0;
min-width: fit-content;
}
<table>
<tr>
<td class="stretch">this should stretch</td>
<td class="stretch">this should stretch</td>
<td class="fit">this should be the content width</td>
</tr>
</table>
Simple :
<div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>