In My ASP.NET Application, I have a table.
Eventhough I set column width, it changes in the browser (100px column becomes 96px or 108px).
I have div inside the th tag. If I set 100px width to the div, It comes out of the th as the rendered column width is 96px. What's the solution for making the column width exact ?
Please Don't tell me to make 100% width for div, as its using absolute position (For making the table header fixed.)
<table border="0" cellpadding="1">
<tr>
<th align="center" width="100px">
<div style="width:100px;">PV#</div>
</th>
<th align="center" width="90px">
<div style="width:90px;">Date</div>
</th>
<th align="center" width="100px">
<div style="width:100px;">Payment Doc#</div>
</th>
<th align="center" width="410px">
<div style="width:410px;">SOA Payments</div>
</th>
<th align="center" width="100px">
<div style="width:100px;">Payment Made</div>
</th>
</tr>
</table>
Your TH tags have padding on your example. To have the exact width of the div inside each TH you need to set padding to 0.
<table border="0">
<tr>
<th style="padding:0;">
<div style="text-align:center;width:100px;">PV#</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:90px;">Date</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:100px;">Payment Doc#</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:410px;">SOA Payments</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:100px;">Payment Made</div>
</th>
</tr>
</table>
Since all th and div have fixed width, it is not changing width as you mentioned.
cellpadding="1" this will add 2px to the th width.
Related
I need to set a link on a picture. I have to set it up in tables, which I did. But I cannot understand why the picture is linking in full width. That means the background color is also a link. That link should only be on the picture.
If it was a div tag it could be solved with a wrapper, but I do not know how to solve that within tables?
My Example
This is my code:
<body>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
<!-- Row 1 -->
<table class="row collapse" >
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center" >
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
I didn't notice this should happen. Try this CSS :
th {
text-align: center;
}
th a {
display: inline-block;
}
edit using #SpencerMay comment
How can I centralize a thead text in HTML tables?
I'm trying this:
...
<thead rowspan="3" align="center">
<th> Table </th>
</thead>
...
<th style="text-align: center"> Table </th>
Try giving th width of 100% with text-aling:center as style property
I'd like to make to following table adapt its width to the cells, instead of its container:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The width of the container is narrower than the sum of the cell width. It is okay to show horizontal scroll bar here, but the table just can't be wider than its container. If I calculate the sum width for the colspan and the table, it can do the job, but what if the cells has non-px width, like "%" or "em"? Then static px calculation can't work.
Current effect is:
The expected effect would be the table's width exceeding the container div's width.
But setting width directly to the table also has problems: the width set for cells will be ignored. For example:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed; width: 900px;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The effect is:
Note the 2nd cell (should be 200px) is as narrow as the 1st and 3rd one.
Anybody could shed some light on this issue? Thanks in advance.
add css:
th{
min-width:50px; /*for instance*/
}
div{
overflow-x:scroll;
}
and remove style='table-layout: fixed; width: 1px;' from the table
Would positioning the table absolutely be acceptible?
<table border="1" style="position:absolute;">
This works such that the div no longer contains the table horizontally. But, of course, the div also no longer contains the table vertically. You could work around this by giving the div height manually, though.
Merijn's answer works, tweaked slightly, for the fixed-width cells case:
Instead of specifying a global th min-width, specify it per cell like so:
<th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>
At least this way, your individual width's are not ignored, giving you a table wider than the container, and with irregular width cells.
I'm hoping there is a way to shrink the height of a td so that the height is exactly what I want, example 6px when it is holding 11px text. I'm envisioning being able to see the top half of the cell content.
The reason I don't want to just set the div height is I want each row to be the same height, and there are cells spanning rows so the div would be cutting off content to one cell when it should be able to expand to the two cells. I hope that makes some sense...
<table>
<thead>
<tr>
<th style="height: 0px; width: 0px;">
</th>
<th style="width: 25px;">
</th>
<th style="width: 25px;">
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="height: 6px;">
</td>
<td>
<div>
Some table data</div>
</td>
<td rowspan="2">
<div>
Some data that is two rows high</div>
</td>
</tr>
<tr>
<td style="height: 6px;">
</td>
<td>
<div>
Some more data</div>
</td>
</tr>
</tbody>
</table>
You can't restrict the table cells' height but you can enforce height on the immediate <div>s:
td > div {
overflow: hidden;
height: 6px;
}
So far, I'm doing this programmatically using VB.net/ASP.net:
<table cellspacing="0" cellpadding="4" border="0" style="border-
width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-
decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-
decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
</table>
<div style="width:100%;clear:both;text-align:left;margin:0;">
<div style="width:375px;float:left;margin:0;display:block;">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</div>
<div style="background-
color:#F0D3D3;width:210px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#CFF5CE;width:140px;float:left;margin:0;display:block;"></div>
<div style="background-
color:#BEE0F7;width:210px;float:right;padding:0;margin:0;display:block;"></div>
</div>
This should give me four DIVS inside a container DIV. Here's what it's coming out as:
The correct blocks above the non-inline blocks are from a table with the same exact widths as the ones I'm using on the Divs. There isn't any CSS adding pixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here.
You can use instead of divs the colspan="[number]", for example:
<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td>
</tr>
<tr>
<th style="width:70px;">M</th>
<th style="width:70px;">PG</th>
<th style="width:70px;">PV</th>
<th style="width:70px;">PDD</th>
<th style="width:40px;">R</th>
<th style="width:55px;">I #</th>
<th style="background-color:#F0D3D3;width:70px;">P A</th>
<th style="background-color:#F0D3D3;width:70px;">U D</th>
<th style="background-color:#F0D3D3;width:70px;">B P</th>
<th style="background-color:#CFF5CE;width:70px;">P U</th>
<th style="background-color:#CFF5CE;width:70px;">D E</th>
<th style="background-color:#BEE0F7;width:70px;">P</th>
<th style="background-color:#BEE0F7;width:70px;">U D</th>
<th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
<tr>
<td colspan="6">
<img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
<span style="font-weight:bold;font-size:16px;">Test Company</span>
</td>
<td colspan="3" style="background-color:#F0D3D3;"></td>
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td colspan="3" style="background-color:#BEE0F7;"></td>
</tr>
</table>
Hoped i helped you.. =)
Width: 100% on the table overrides individual column widths. In your table, there are 13 <th>, and each will have a width of 1/13:th of the table's width. A width property on a <th> doesn't do anything. You could force it by adding display: inline-block to the <th>, but I wouldn't want to go that way.
Also, you should set the pink and green divs to float: right in order to remove the white inbetween green and blue (note however that you'll have to change the order of the divs in your code).
Also, I'd suggest using a table instead if you're aiming to present tabular data.
Did you put cellspacing="0" cellpadding="0" on the table? If not, that might be where the difference is coming from.
Or maybe border.
Can you include the table header?