I want to change the width of one of my cell but without to fixed all table cells. Is there any way to change specific <td> without the rule table-fixed
Give the td a class name. Like <TD CLASS="class">cel</TD>
Then in css call it like .class {color:red}
https://jsfiddle.net/tnquk2xt/
You can add a class to the table cell and style it appropriately like so:
CSS
.large {width:150px;}
.small {width: 50px;}
HTML
<table>
<tr>
<td class="small">First</td>
<td class="large">Second</td>
<td class="small">Third</td>
</tr>
</table>
Here is a fiddle: https://jsfiddle.net/mmvbmktn/
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_width
<td width="70%">
It was not really hard to find, they set width of the 2 TDs but it works also with only one TD width.
Use Google !! :3
Related
I am trying to hide this:
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
And this is my attempt:
thead.col-image all {
display: none;
}
^ this didn't work - any idea?
Thanks!
You are calling the wrong element and ALSO 'all' is not a selector;
thead.col-image all {} // is calling e.g. <thead class="col-image">
It should be
thead tr th.col-image.all { display: none; }
thead.col-image all means <all> tags in <thead class='col-image'>
correct css for your code should be
thead .col-image.all {
display: none;
}
https://jsfiddle.net/pb5k4v63/26/
with <th> tag only heading will disappear.
Attach a class for <th>or <td> or <tr> depending on your requirement.
and for that class apply the property
{visibility:hidden} which will not affect alignment of your table.
where as {display:none} can affect the alignment (though it works.)
you can use class for td th or add a span to text you want to hide and add class to it
.hide{
visibility:hidden;
}
<table>
<tr>
<td>hello</td>
<td class="hide">hide me</td>
<td>and also <span class="hide">hide me</span></td>
</tr>
</table>
TL;DR Wrap your <thead>, <th>, etc. within the <table> element. Also make sure you are calling the proper elements in your CSS.
An HTML table is defined with the <table> tag.
So in essence you have the <th>, <thead>, etc. elements operating outside of a <table>, so you are breaking your code because the <th>, <thead>, etc. require the parent <table> element to function properly.
Why you may ask? As stated above a table is defined with the <table> tag, so you do not really have a table on your page.
In conclusion "wrap your tables rows, heads, etc within the <table> element for now on.
Here is the code:
HTML
<table>
<thead>
<tr>
<th class="col-image all" data-name="image" data-orderable="false" data-searchable="false" data-width="200px" data-priority="4">Image</th>
</tr>
</thead>
</table>
CSS
th.col-image.all{
display: none;
}
You can view the code live here: https://jsfiddle.net/W3Develops/nbf17pus/6/
I also added another table in there so you can see how to properly make a table.
Here is a link to Mozilla Developer Network and W3Schools so you can learn more about making tables. Good luck:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
https://www.w3schools.com/html/html_tables.asp
Also you were calling classes for thead when you should have been calling classes for th.
Cheers.
I have a table to which a user can add new columns. The width hence is not fixed. How can I fix the header for such a table?
I tried:
display:block
overflow-x:hidden
overflow-y:auto
height:70%
in table body. It worked partially.
If I understand your question correctly (posting your HTML would help) you can nest a table inside the part that can be extended. You will be able to add as many columns (<td>) without effecting the table header.
table td table td {
border: solid 1px grey;
}
<table>
<tr>
<th>Add your fixed table header</th>
</tr>
<tr>
<td>
<table>
<tr>
<td>New Columns</td>
<td>can be added</td>
<td>without effecting your header</td>
</tr>
</table>
</td>
</tr>
</table>
Putting 2 one-row tables after each other I get the desired outcome: 2 adjacent rows that don't have the same column width. http://jsfiddle.net/x2SQN/
---------------------
|100px | 100% - 100px|
---------------------
| 50% | 50% |
---------------------
Can I achieve this also with a single <table>?
http://jsfiddle.net/x2SQN/
Basically I cannot use javascript or not in-line css.
No. Within a table the columns remain consistent from top to bottom.
You can play around with the colspans of each cell but that's about it.
e.g. if you wanted you could do this.
<table>
<tr>
<td width="20%">20%</td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>
<tr>
<td width="50%" colspan="2">50%</td>
<td width="50%">50%</td>
</tr>
</table>
But you will be limited to using a combination of fixed px sizes OR % sizes as you can't do 50% - 100px for example.
Usually, We transform block elements to the table model to achieve a 'Table like' display, and now, as a solution to your problem: I found myself doing just the opposite.
the main idea is to transform your table, to a block model design, where we can take control of the width of every element.
the main gain of my solution, is that you can use CSS function (like calc) to give responsive width to column [like calc(100% - 100px)].
but the main downsize of my solution is the scenario when you have different cells height in the same row.
luckily that can be easily fixed with faux columns techniques. (I used one-true-layout)
so, after all that been said, lets take a look at the solution: (some of it is written in the CSS section, with regular CSS selectors and not inline as you requested, because it was easier for me. but you can copy-past everything to the right place and make it all-inline)
Working Fiddle Tested on: Chrome, IE10, FF
HTML (I've add the <tbody> so you can apply the inline-CSS styling)
<table>
<tbody>
<tr>
<td style="background-color:red; width: 100px;">100px</td>
<td style="background-color:yellow; width: calc(100% - 100px);">100% - 100px<br/>another line to demonstrate <i>faux column</i></td>
</tr>
<tr>
<td style="background-color:azure; width:50%;">50%</td>
<td style="background-color:pink; width:50%;">50%</td>
</tr>
</tbody>
</table>
CSS (all of that styling can be placed inline)
*
{
margin: 0;
padding: 0;
}
table, tbody, tr
{
display: block;
}
tr
{
overflow: hidden; /*Faux column*/
}
td
{
float: left;
padding-bottom: 99999px; /*Faux column*/
margin-bottom: -99999px; /*Faux column*/
}
You can do this using fake colspan values. Treat them as percentages to keep it simple.
<table border="0" cellspacing="6" width="400">
<tr>
<td colspan="30" style="background-color:red;" />
<td colspan="70" style="background-color:yellow;"/>
</tr>
<tr>
<td colspan="70" style="background-color:black;" />
<td colspan="30" style="background-color:pink;" />
</tr>
</table>
I appending table dynamically using javascript in html with say 50000 cells.
<table id="dataTable">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
..........
<tr>
<td>data1</td>
<td>data2</td>
.....
<td>data1</td>
</tr>
</tbody>
</table>
I'm styling the td with descendant selector as,
#dataTable td{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
Another option is to give class to each td using class selector.
<table id="dataTable">
<tbody>
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
..........
<tr>
<td class="format">data1</td>
<td class="format">data2</td>
.....
<td class="format">data1</td>
</tr>
</tbody>
</table>
Here we have used format class for styling.
.format{
text-align:right;
border:1px solid #adadad;
padding-right:10px;
}
I'm facing performance issue while rendering the table in browser. Is this because I've used DESCENDANT SELECTOR INSTEAD OF CLASS SELECTOR.
Or Browser is not able handle large data.
About the table performance
Tables can be slow to render mostly due to the dynamic column sizes that need to be calculated and set on every change.
You can solve this by specifying a fixed size for each column, like so:
#dataTable td {
width: 100px; /* Set sizes appropriately */
}
This should make your table more performant
About CSS performance
CSS selects by the last token first, so for example, to execute the following selector:
#dataTable td
CSS will first select ALL td elements and then check if each of them is a descendant of #dataTable. Technically, specifying a class for each cell is faster.
However, this is probably not significant enough to pay for by complicating your overall design.
I recommend reading Efficiently Rendering CSS by CSS-Tricks to get a better idea about CSS and performance.
I am having a table as follows:
<table>
<tr style ="height: 10px;" >
<td style="width: 200px, height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td>
</tr>
</table>
The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change and even if the extra texts are not shown it`s fine.
I also want the height of the rows and columns to be of 3 lines of text and fixed in height.
First off, the code was incorrect. Here's your code corrected, try does it work what you wanted it to:
<table>
<tr style="height: 10px;" >
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
</tr>
</table>
Second, the way you're styling is very old-school and hard on you, try creating a CSS class which you can then apply to every element, no need to repeat the rules. In fact, if this will be the only table on your page, you can put something like this inside head:
<style type="text/css">
td {
width: 200px;
height:10px;
}
</style>
That will apply your rules to all tags on page, so you don't have to explicitly style each and every one.
Or you can do:
<style type="text/css">
.exampleclass {
width: 200px;
height:10px;
}
</style>
<table>
<tr style="height: 10px;" >
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
</tr>
</table>
That way you control your styling from one place, and are also able to apply it to other elements as you see fit.
If there's anything else, ask away.
EDIT: And for fulfilling your requirement of widths being fixed at cost of extra content not showing, apply both answers of Guzzie and QQping. Although if you're ok with varying height, you don't have to set overflow:hidden;
You should set the table's style to fixed like this and add the total width of the table
<table style='table-layout:fixed' width='300px'>
Firefox may not like to see table cells with overflowing long texts cause of fixed column-widths, to better display this you should set the following TD style in your css or on your current page
<style>
td {overflow:hidden;}
</style>
Simply add max-width with to your table cell.