Can't Change Width Of Table Data Element
Solution 1:
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;}
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.
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.
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.
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.
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.
Post a Comment for "Can't Change Width Of Table Data Element"