I need to separate table and into headers and rows to be able to control scrolling. But now column width for headers and cells appear to be different. I'm trying to eliminate all padding and border on span element. In this example column header appears as 131px. In my other case, cell width comes as 129px (less than defined width 130px) and I'm not able to figure it out.
<table style="border-collapse: collapse;">
<thead>
<tr>
<th style="width: 130px; padding:0px; border:1px solid;">Column1</th>
</tr>
</thead>
</table>
<table formArrayName="scheduleDetail" style="border-collapse: collapse;">
<tbody>
<tr>
<td style="width: 130px; padding:0px; border:1px solid; box-sizing: border-box;">
<span style="width: 130px; padding:0px; border:0px;">
1111
</span>
</td>
</tr>
</tbody>
</table>
Seems like width on span is not applicable unless used with display: inline-block. That resolved.
Related
I'm trying to create a table with a decorative border with the content in the middle. So I've created a 3x3 table with images in all the outer cells and content in the middle cell. The code looks like this:
<table cellpadding="0" cellspacing="0" border="0" width="60%">
<tr>
<td style="background:url(box_topleft.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
<td style="background:url(box_topmiddle.png);repeat-x; height: 125px"></td>
<td style="background:url(box_topright.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
</tr>
<tr>
<td style="background-image:url(box_middleleft.png);background-repeat:repeat-y;width: 45px;"></td>
<td style="background-color:white">text</td>
<td style="background-image:url(box_middleright.png);background-repeat:repeat-y;width: 45px;"></td>
</tr>
<tr>
<td style="background:url(box_bottomleft.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
<td style="background:url(box_bottommiddle.png);repeat-x; height: 125px"></td>
<td style="background:url(box_bottomright.png);background-repeat:no-repeat transparent;width: 45px; height: 125px"></td>
</tr>
</table>
Everything lines up and looks great on a white body background. But when there is another color background or a background image for the body, the background color peeks between the cells.
A simpler example, given a blue body background, the following example should just be a white rectangle:
<table cellpadding="0" cellspacing="0" border="0" width="60%">
<tr>
<td style="background-color:blue; width:10px; height:100px"></td>
<td style="background-color:blue; height: 100px">text</td>
<td style="background-color:blue; width:10px; height:100px"></td>
</tr>
</table>
But the browser shows blue lines between the TD.
This happens in Chrome, partially in Firefox and not at all in IE. The cell padding and spacing is already zero, so I don't know why there's any background visible between the cells in Chrome. Is there anything else I need to do?
I've also added the following without success:
table {
border-collapse: collapse;
}
table, th, td {
border: 0px;
}
Thanks. Any help appreciated.
My code is this :
<div style="width: 300px;">
<table width="100%" border="2px solid blue">
<tr>
<td style="width:30%">Player</td>
<td style="width:30%">Club</td>
<td style="width:30%">Country</td>
</tr>
<tr>
<td style="width:30%">HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard</td>
<td style="width:30%">Chelsea</td>
<td style="width:30%">Belgium</td>
</tr>
<tr>
<td>Ronaldo</td>
<td>Real Madrid</td>
<td>Portugal</td>
</tr>
<tr>
<td>Messi</td>
<td>Barcelona</td>
<td>Argentina</td>
</tr>
</table>
</div>
The result is this :
I tried to add width=30% in the column player, but it's still not working.
it's beacause your text is too large
use this may help you
<style>
table tr td
{
word-break: break-all;
}
</style>
Moob was before me, use word-wrap:break-word; but also use table-layout:fixed
css code
table{
table-layout: fixed;
}
td {
word-wrap:break-word;
}
That's because "HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard" is stretching it.
Table cells will stretch to fit their content, and if they can't break, they will keep stretching.
If it was "Hazard hazard..." etc with spaces, it would break as expected. The same would happen if you put a large image in the table cell.
I have code
https://jsfiddle.net/ang3lwish/dnt4pv6m/2/
<div style="border:1px solid yellow;display:block;">
<table border=1 align="center">
<tr>
<th>No.</th>
<th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>Email</th>
</tr>
<tr>
<td>
1.
</td>
<td>
Anto
</td>
<td>
Padang
</td>
<td>
Male
</td>
<td>
anto#gmail.com
</td>
</tr>
</table>
<br>
</div>
I want the div width (in line yellow) is follow table width?
But i don't know how to set css?
Make table width 100% Add this is your table tag
<table border=1 align="center" width="100%">
If you want the table to be fit to the div you need to put 100% width to the table
<table width="100%"> the table adjust itself depending on the div. cheers :)
If you want to follow the yellow line(i.e your div) without css then use width=100% in your table attribute but again only using this will not help you much for setting the table in div properly so better use this:
in css:
.pad
{
padding-top: 25px;
padding-right: 50px;//set as you like them//
padding-bottom: 25px;
padding-left: 50px;
}
and then include this class in table as:
<table border=1 align="center" class="pad">
I want to create a table in HTML with this structure:
The contents will then to fit the cells.
I'm having trouble working out exactly what sizes need to be set to what to get this to work. The white space can be cellspacing or padding or anything else that works, but I can't work out what percentage to set it to. I'm more concerned about width than height, here, but the vertical and horizontal spacing should be equal in absolute terms.
For instance, if I wanted it more simply to be 10% - 10% - 80%, setting the spacing to 10% doesn't seem to create this.
<table style="border:1px solid black;width:100%">
<tr><td >ffff</td><td rowspan="2" style="border:1px solid black">hhhhh</td></tr>
<tr><td style="border:1px solid black">rrrr</td></tr>
</table>
your this table structure for this
Try this code:
DEMO
<table cellpadding="0" cellspacing="0" width="100%" height="100%" style='background:red;'>
<tbody>
<tr >
<td style="width: 71.2%;
height: 49.55%; border-bottom: 4px solid white">
Insert header image
</td>
<td rowspan="2" style="height: 49.55%; width: 27.62%; border-left: 4px solid white;">
Insert header image
</td>
</tr>
<tr>
<td>
Insert header image
</td>
</tr>
</tbody>
</table>
I am getting different results when applying table-layout:fixed to a table and using padding on the cells. IE and Firefox seem to work correctly by adding the cell width and the padding together. Chrome and Safari only use the cell width. I saw there is a bug out for the problem, but can't find any workarounds. Does anyone know how to get around it?
WebKit Bugzilla : https://bugs.webkit.org/show_bug.cgi?id=13339
table {
width:200px;
border-collapse:collapse;
}
#table-1 {
table-layout:auto;
}
#table-2 {
table-layout:fixed;
}
td {
padding:5px 10px;
}
td.set-width {
width:15px;
}
.box {
width:15px;
height:15px;
background-color:red;
}
<h2>Table-Layout: Auto</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-1">
<tr>
<td> </td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td> </td>
<td>unbroken</td>
</tr>
</table>
<h2>Table-Layout: Fixed</h2>
<table border="1" cellspacing="0" cellpadding="0" id="table-2">
<tr>
<td> </td>
<td class="set-width"><div class="box"></div></td>
</tr>
<tr>
<td> </td>
<td>unbroken</td>
</tr>
</table>
There are 3 methods I can think of.
The easiest would be to add stylesheet blocks interpreted only by Chrome and Safari that adjust behavior to take into account the rendering issue. Avoid using "#media screen and (-webkit-min-device-pixel-ratio:0)" since that can affect Opera and some versions of FF. Use "body:first-of-type":
body:first-of-type td {
padding:5px 10px;
}
You can also have separate stylesheets:
<link rel="stylesheet" type="text/safari" href="webkit-styles.css" />
<link rel="stylesheet" type="text/chrome" href="webkit-styles.css" />
The third option is to use Javascript. Within script tags you can use navigator.appName and navigator.appVersion to identify the browser and fix issues dynamically.
If you have a diff in how they are calculating width when padding is involved, why not remove padding from the td?
<table style="table-layout: fixed;">
<tr>
<td style="width: 100px;">
<div style="padding: 10px;">
lorem, ipsum.
</div>
</td>
</tr>
</table>
You can work around this bug if you use the <colgroup> tag and specify widths on the <col> INSTEAD OF on the <td>.
.secondCol {
width: 15px;
}
<table border="1" cellspacing="0" cellpadding="0" id="table-2">
<colgroup>
<col class="firstCol">
<col class="secondCol">
</colgroup>
<tr>
<td> </td>
<td><div class="box"></div></td>
</tr>
</table>
Set the position type (absolute/relative etc) of the boxes to get equal results, you will need to tweak the boxes from there.