I have to add data to table cells dynamically. But when I add data to one cell, the height of all the other cells also increases. So, is there any way that the height of only that cell where data is added increases, rest remain same.
Also is there any way to insert only table cells beneath certain cells in a row without adding a new row?
embed the content in each cell within a DIV and enable overflow:auto on that div, so that a scroll bar appears if the height exceeds the maximum permitted.
<table><tr><td height="50"> Hello World!!</td></tr></table>
Put the height inside the td tag
Fundamental problem... tables are grids. You can merge cells (col/rowspan) but a line is always a line - which is to say you can't make a cell a different height to its neighbours by definition.
If you're trying to show data in a hierarchical way, use a hierarchical structure like <ul>/<li> and style it as appropriate (margins, etc...). If you need block elements, have each <li> wrap a <div>
Related
I'm posting a screenshot of the element in question. You should be able to see, I am applying element-specific styling removing all margin, padding and setting the width to 0px. No matter what I do, this table data element is abnormally large. I want to significantly reduce its width, but it won't listen to me. I have the feeling this is some obscure HTML algorithm that I know nothing of but can't say. Any ideas?
Update: The answer was that HTML will make sure the table data elements take up the entire width of the table, no matter if you try to narrow individual elements (so in essence, it was some weird HTML algorithm or functionality). That said, I will accept the answer below because it is so thorough it should cover the other possible issues people may run into.
There is some obscurity to how the width of a table cell (<td>) is defined, as official documentation is unclear and allows some behavior to be defined by the browser. But here are a few characteristics that appear stable across the spectrum of browsers.
Managing the Width of HTML Table Cells <td>
Table with Single Cell
In a table that consists of a single cell – in other words, a table with one column and one row – where the width hasn't been explicitly defined in the <table> element, the width can be controlled directly by the <td> element.
This won't work (the td rule will be ignored):
table { width: 100%;}
td {width: 300px;}
The width: 300px fails because the <table> element has a defined width.
However, this will work:
/* table { width: 100%;} */
td {width: 300px;}
DEMO
Table Column with Multiple Cells
To set the width of a table cell in a column with multiple cells the entire column must be adjusted. Any widths assigned to the individual <td>s will be ignored. Simply adjust the width of the table to adjust the width of the <td>s in the column.
DEMO
Table with Multiple Columns and Multiple Rows
To set the width of a table with multiple columns and rows, the Table Column Element (<col>) is ideal because it targets individual columns.
DEMO
The problem described in the question involves a table cell that won't accept a shorter width assignment. The first realization here is that the table cell by default expands to fill 100% of the column width allotted (learn more about <td> default width). The way to reduce the width of this cell is described above.
HOWEVER, I suspect that in some cases the person wanting to reduce the width of a table cell is actually trying to reduce the width of the content inside the cell (like an image or a form input). In these cases, adjusting the table may be unnecessary. All that would be needed is to adjust the width of the content itself, or its container (div, span, figure, etc.).
In this image, the width of the table cells are at 100%, but the width of the input fields vary.
DEMO
colspan
If in fact the need is to reduce the width of a single cell within a column of multiple cells, then you may want to consider the colspan attribute. With colspan, columns can me merged making cells wider. Cells without colspan assigned will be shorter, and appear even shorter when their adjacent cells are hidden.
In this image, display: none has been applied to the bottom right cell of this 2-column table.
DEMO
So, in the case of your table cell that won't budge, consider adjusting the width of the <table> element (if it's a single column table), assign and adjust a <col> element (if it's a multi-column table), adjust the width of the content directly (if that's the only element you want adjusted), or use colspan.
Sorry I can't be more specific about the exact solution in your case. No code was provided for review. But hopefully one of these methods helps you out.
I am working on cleaning up my companies newsletter emails. My issue is that I would like to force my <td> to respect the width that I specify rather than following the widths of the previous <td>. The other issue is that this needs to be very email client compatible.
Here's a jsfiddle of what I'm working on. http://jsfiddle.net/zwf0dL8r/ Sorry about the inline styles, aren't html emails great..
As you can see, the light grey areas are following the width of the first <td> which is holding the cpap.com logo.
Ideally, I wanted to be able to define the widths of <td>s to something new, each time I create a new <tbody>..
You could use CSS to force some behavior, but the browser or email client generally calculate the width of columns automatically based on content, using the widest specified width for the column when the content is shorter. To avoid this you can add the property table-layout: fixed; to the style of the table, but you will have to manually assign the correct widths for each column.
Tables with fixed layout are faster to display but don't resize according to content. The larger content overflows it's cell, causing an ugly looking overlapping data.
Take a look here for e-mail client compatibility: https://www.campaignmonitor.com/css/
Edit.:
To make the bellow cell take the space of the above cells you can add a colspan="numOfColsToTake".
What many people forget is that each <TD> define a column, not only an individual cell. Imagine you are designing it on Excel. If you would do this on Excel, you would have to use the merge cells option for the bellow cell to take the space of the 2 above. The colspan attribute of <TD> elements makes exactly this.
<td colspan="2"><p>Something</p></td>
I've found a very strange behavior of a HTML table, where the width allocation of the cells depends on the count of rows. If I have 2 rows the cells have all the same width but when I insert another row the first column expands a little and the second column is narrower than the others.
I have uploaded an example on fiddle.
You can see this behavior when you delete the comment around the third row in the HTML.
Where does this behavior come from?
Table cells will expand to the content unless they have a fixed width. In your example you have table inside tables. Tables tend to have default values such as padding and cell spacing.
To get around this you can use a reset style sheet and modify the CSS of the table and its cells to your choosing
You may need to also perform CSS declarations such as collapsing borders if you really want it to be pixel perfect.
actually columns expands and oontract on the base of contents inside the header or cells
DEMO:http://jsfiddle.net/aPPAL/1/
see the results.
I have a html table which I would like to control the sizes of the cell manually. I am getting confused about how its supposed to work.
First of all, there is a css attribute "table-layout" which is supposed to control whether or not the cell size is automatically set to the largest content in the column or to a fixed size. I tried setting the css width for the td elements using both table-layout=auto and =fixed, and both times the content shrinked from its original size. The problem is that it didn't shrink to the size I wanted to using either value for table-layout.
Here is my css code:
table {table-layout:fixed;}
tr, td {border-style:solid;
border-width:2px;}
.coursename{width:50px;}
.startdate {width:5px;}
.isbn{width:10px;}
.author {width:20px;}
.booktitle{width:10px;}
Second of all, what exactly are the rules for a automatic table layout? If the content of all the table cells together go past the size of the page, are there certain columns which will shrink first? Will they shrink at all?
One idea that might help is, if you have a link in each cell for example, set the link like this:
a { display: block; width: 30px; }
Do this for every cell in the table row and you will have table cells with fixed widths. Provided that you fixed the width of the table as well... :)
I am still unsure what your problem is, but you could try
{table-layout:inherit;}
This should get the size from the parent element.
Also, you could insert the css element into the html and have it override any other elements by preceding it with a !
{class="!width:300px;"}
Hope this helps.
Like the title says, I have a table with many rows and columns. The text within the cells will be populated dynamically. If a column has a set width and the amount of characters exceeds this width, I want the excess text to be hidden rather than the column made wider. How can i achieve this? i tried overflow:hidden in the <td> style without success.
you need to put div inside td - div can handle overflow: hidden
Or make table layout fixed using table style - this will cause table will not change columns width automatically