I'm creating a very complex table and I want to know how to change the width of an individual table cell without affecting the other cells in the column.
<table border="1" class="table table-bordered">
<tr>
<td width="25%"><b>SURNAME</b></td>
<td width="25%"><b>First Names</b></td>
<td width="10%"><b>Decorations</b></td>
<td width="20%"><b>Current Appointment</b></td>
<td width="5%"><b>Date</b></td>
<td width="15%"><b>File Number</b></td>
</tr>
<tr>
<td width="10%"><b>Department</b></td>
<td width="10%"><b>Geographical location</b></td>
<td width="15%"><b>Substantive Appointment</b></td>
<td width="5%"><b>Date</b></td>
<td width="10%"><b>Terms of Engagement</b></td>
<td width="55%"><table class="table table-condensed text_size">
<thead class="text-gray-b">
<tr>
<td><b>Date Entry Made</b></td>
<td><b>Salary Scale</b></td>
<td><b>Basic Salary p.a.</b></td>
<td><b>Indicement Pay p.a.</b></td>
<td><b>Date paid from</b></td>
<td><b>M.</b></td>
<td><b>Yr</b></td>
<td><b>AUTHORITY</b></td>
<td><b>Signature (Certified By)</b></td>
<td><b>Name Stamp (Certified By)</b></td>
</tr>
</thead>
<tbody>
<tr>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
For example now I tried using the 'width' attribute to change the widths of two cells in the same column (SURNAME & Department), but it seems the size of the cells in the same column can't have different widths.
Is there a way for table cells (td) in the same column to have different widths?
have you tried colspan attribute of the td element , you can use numbers like 1 and 2 etc
when you need the td to take width of 2 columns etc
That's not possible - the special thing (layout-wise) about a table is exactly that, that all cells in a column will always automatically have the same width and all cells in a row will always automatically have the same height.
The only (kind of...) exception are colspan and rowspan attributes inside the td tags which determine that that particular cell takes the space of itself and the subsequent cell/s (depending on the number value in that attribute). However, then you have to be careful to put accordingyl less cells in a row or column, so that the overall number stays the same (regular cells counted as 1, the others by their colspan or rowspan value)
Related
I want two rows in single cell.
This is the code I have written. I have used rowspan to increase the cell width.
<tr>
<th rowspan="2">Questions</th>
<th>sub1</th>
<th>sub2</th>
<th>sub3</th>
<th>sub4</th>
<th>sub5</th>
<th>sub6</th>
</tr>
I have tried to add the staff but I did not get the way I want.
This way you can add two rows in a single cell using html
<tr>
<th>
<table>
<tr>
<td>sub1</td>
<td>sub2</td>
</tr>
<tr>
<td>sub3</td>
<td>sub4</td>
</tr>
</table>
</th>
<th rowspan="2">Questions</th>
<th>sub1</th>
<th>sub2</th>
<th>sub3</th>
<th>sub4</th>
<th>sub5</th>
<th>sub6</th>
</tr>
I have a table just with a couple of rows and columns in it. What I am stuck with is the width of the column whenever the length of the field increases
So, say, just for instance, I have a table as:
<table>
<thead>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>valuenfkdkfkdsnfndfndnkffdfndsfnndfnksfnfsfsdnsffs</td>
<td>value2</td>
</tr>
</tbody>
</table>
with a value which has field length of 35-50 characters like the one in the first "td" tag, the table goes out of the prescribed webpage area.
I used {word-wrap: break-word;} but there seems to be no effect. Is there a way to cut of the field length to the next line whenever this is the case and set the column width to a fixed size?
You might be looking for CSS property table-layout:fixed
<table class="users" style="table-layout:fixed;">
<tbody>
<tr>
<td>0001</td>
<td>Johnny Five</td>
</tr>
</table>
OR
CSS:
table.users{table-layout:fixed;}
Source: https://css-tricks.com/fixing-tables-long-strings/
My idea in general: I have HTML Table with custom rows inside. This is similar example:
2nd cell in 1st row - Shold be about 40% of row and 6th cell of 1st row should be a double
8th cell of 2nd row should be big ~ 40%
Basically this 2 rows repeats in my table. Each 2nd row collapsible and it collapse on click in first cell of 1st row. The problem is when I collapse and back my table changes the size of columns and my screen jumps all the time. I want this rows to be always the same structure, but since I have response design I don't want to set exact width for each cell.
I've tried a dozen of variant with colspan and % of width, but nothing work for me.
this is my latest result:
<tr class="mattersRow">
<td colspan="4">
</td>
<td class="editableCell qbmatter" colspan="14"></td>
<td class="editableCell workDate" colspan="4"></td>
<td class="editableCell hours" colspan="2"></td>
<td class="editableCell person" colspan="6"></td>
<td class="rate" colspan="2"></td>
<td class="editableCell amount" colspan="4"></td>
<td align="center"></td>
</tr>
<tr id="collapse63" class="helpRow in" style="height: auto;">
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="2"></td>
<td colspan="4"></td>
<td colspan="2"></td>
<td colspan="4"></td>
<td colspan="2"></td>
<td colspan="16"></td>
<td colspan="4"></td>
</tr>
Can you help me to build this rows properly...
You're on the right track, but tables are designed to have rows and columns end at the same spots, so that little bit of extra space to the right of the 2nd cell in the first row, is either something that will be a ton of work to replicate, or will just be much easier to have them line up. Otherwise you'll start getting into nested tables and it will be more work than it's worth. You could always use a table building generator like TableGenerator
To get that sort of variation you need to have 2 different tables since it will try and align the td's
I would highly suggest putting those into divs with styling. It's pretty clear that you're not using them for tabular data - since you're using it for layout I suggest looking at this question here. This could be achieved relatively easily with some simple css.
I have come across with a problem regarding tables, to be more specific with the colspan attribute for the cells (td tag), I would like to do something like this:
*** ------- +++
------- *** +++
Where each symbol is a cell, as you might notice, the 2 column from the 1st row has a colspan=2 since is sharing it with the column number 1 and 2 from the 2nd row, meanwhile the 1st column from the row number 2 shares the space with the column number 1 and 2 from the 1st row.
I have tried (see code below), but of course (at least in chrome and in firefox) it doesn't work as expected. I think this is achievable but I am short of ideas and I will be really thankful for your suggestions.
<TABLE>
<TR>
<TD>1</TD>
<TD COLSPAN="2">2</TD>
<TD>3</TD>
</TR>
<TR>
<TD COLSPAN="2">4</TD>
<TD>5</TD>
<TD>6</TD>
</TR>
</TABLE>
After some searching I have found the solution, it seems that you have to use the col tag, not sure why yet, but it works!
<TABLE>
<col style="width: 1px;">
<col style="width: 1px;">
<col style="width: 1px;">
<col style="width: 1px;">
<TBODY>
<TR>
<TD BGCOLOR="#CDB599"></TD>
<TD COLSPAN="2" BGCOLOR="#9CC5C9"></TD>
<TD BGCOLOR="#CDB599"></TD>
</TR>
<TR>
<TD COLSPAN="2" BGCOLOR="#D5544F"></TD>
<TD BGCOLOR="#CDB599"></TD>
<TD BGCOLOR="#CDB599"></TD>
</TR>
</TBODY>
</TABLE>
You don’t specify how you expect the markup to work, but the way it works is that slots in the second column are zero-width, as there is nothing that requires any minimum width for them. You can see this if you add a third row, with four normal cells:
<tr><td>foo<td>bar<td>more<td>stuff
Then the second column will take the width needed for “bar”.
if i have a table like following, I didn't make it to define a special width for a single element. Is this possible?
For illustration, i've tried it like this:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td>Blub</td>
<td style="width: 100px;">Bli</td>
<td>Hello</td>
</tr>
</table>
Is this possible?
Not really, no. The only thing that exists is the colspan and rowspan attributes that can make a cell span across two columns like so:
<table border="1">
<tr>
<td>Bla</td>
<td>_____________________________________________________</td>
<td>Bla2</td>
</tr>
<tr>
<td colspan="2">Blub Bli - I will span across the whole large line!</td>
<td>Hello</td>
</tr>
</table>
but the exact thing that you want - being completely flexible in cell widths - can be achieved only by two separate tables.
Since you have not specified width explicitly, your other TDs will also be as large as the largest one:
<td>_____________________________________________________</td>
Same is the case with table tag because you have not set width for it too.