I have a table within a div (see below). How do I add a right padding of say 30px to each cell/column within the table in that div? My understanding is that I have to use inline CSS? Basically, I want each cell to be padded on the right by 30 pixels.
<div id="ddTopMenu";>
<table border="0" >
<tr>
<td width=100></td><td >Dictionary</td><td>Search</td><td>Sources</td><td>References</td>
</tr>
</table>
</div>
div#ddTopMenu table td {
padding-right: 30px;
}
You just need to select the dom element starting from 'ddTopMenu':
#ddTopMenu table td {
padding: 0px 30px 0px 0px;
}
Do you truly mean padding, which is like a margin within the TDs themselves, or a 30px separation between cells in the same row?
If you want a padding, then set the padding-right to 30px, possibly excepting the TDs in the last column.
If you want a 30px separation between cells in the same row, then you should take a look at border-collapse. Set the left and right border widths of all TDs to 30px, the border color to the background color of #ddTopMenu, and border-collapse to collapse. You can also set the right and left border widths of the rightmost and leftmost cells, respectively, to 0 so that the 30px separation is only between cells:
<!DOCTYPE html>
<html>
<head>
<style>
#ddTopMenu {
display: inline-block;
border: black 1px solid;
background-color: red;
}
#ddTopMenu td {
background-color: white;
border-left: red 30px solid;
border-right: red 30px solid;
border-collapse: collapse;
}
#ddTopMenu td.first {
border-left-width: 0;
}
#ddTopMenu td.last {
border-right-width: 0;
}
</style>
</head>
<body>
<div id="ddTopMenu">
<table border="0" cellspacing="0">
<tr>
<td width="100" class="first"></td><td >Dictionary</td><td>Search</td><td>Sources</td><td class="last">References</td>
</tr>
</table>
</div>
</body>
</html>
Related
I'm trying to use external css to format a 3-column table with 100% width and column widths of 10%, 80%, and 10% respectively. All my td attributes work from the external stylesheet except width.
<td style="width:10%">
works in inline css, but not as an internal style or from the external stylesheet.
It will read td widths from the external css if I remove the 100% width attribute from the table, but then the width of my table changes depending on the amount of text in it.
I have tried using
table-layout: fixed;
with no success. I've also tried removing width from one column at a time with no effect. All the examples I can find use pixels instead of % widths.
Have I missed something simple about table design?
Here's the relevant part of my external css:
table.border td {
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
and here's the table's html:
<table class="border" >
<tr>
<td class="edge"> hi there</td>
<td class="center">it's me</td>
<td class="edge"> bye there</td>
</tr>
</table>
The table it gives me has a wide first column and narrow second and third columns.
Correct the CSS as follows (just removing "td" from this line: "table.border td") and it will work as expected:
table.border{
border-width: 5px;
padding: 10px;
border-style: ridge;
border-color: white;
border-collapse: collapse;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
width: 100%;
}
td.edge {
background-color: green;
width: 10%;
}
td.center{
width: 80%;
background-color: pink;
}
This is jsfiddle example: https://jsfiddle.net/r281bv1z/
Hope this may help.
I need to add background gradients to some td and th elements in page which gets converted to PDF, however I'm getting some very strange behavior from wkhtmltopdf, so when I do this:
table {
width: 100%;
border-collapse: collapse;
}
th {
height: 60px;
border: 1px solid Black;
}
td {
height: 100px;
background: -webkit-linear-gradient(top, #ccc 0%, #888 100%);
border: 1px solid Black;
}
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
The height of the th seems to encroach on each subsequent td somehow. All is well if I remove the th or set its height to a whole multiple of the td height.
Anyone got any insight into what's going on here? My HTML is hard to change so I'm hoping to be able to get this working using CSS alone, or wkhtmltopdf settings.
Edit:
Some screenshots before the bounty expires:
Here's how it looks in a webkit browser:
Here's what wkhtmltopdf does to it:
And one further observation: it doesn't have to be a th to cause the problem, as changing it to a similarly targeted <td class='th'> will cause the same effect.
wkhtmltopdf still uses the old (deprecated) webkit gradient syntax. Try this:
-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#888));
For me it was as simple as adding
background-repeat: no-repeat !important;
What you think about this?
<style>
.table {
width: 100%;
display:table;
border-collapse: collapse;
}
.tr {
height: 60px;
display:table-row;
border: 1px solid Black;
}
.td, .th{
height: 60px;
border: 1px solid Black;
display:table-cell;
background: -webkit-linear-gradient(top, #ccc 0%, #888 100%);
}
</style>
<div class="table">
<div class="tr">
<div class="th"></div>
</div>
<div class="tr">
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
</div>
</div>
Is better to use DIV instead of the tables. You can do same thing with small changes.
And is better for you to add CSS inline to HTML if you work PDF or send on email like template.
UPDATE:
You can do this:
<style>
table {
width: 100%;
border-collapse: collapse;
}
th {
height: 60px;
}
td{height: 100px;}
td, th {
background: -webkit-linear-gradient(top, #ccc 0%, #888 100%);
border: 1px solid Black;
}
</style>
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
or jQuery to replace tables with nested divs:
<style>
.table {
width: 100%;
display:table;
border-collapse: collapse;
}
.table .tr{
display:table-row;
}
.table .th{
height: 60px;
font-weight:bold;
}
.table .td{height: 100px;}
.table .th,
.table .td {
border: 1px solid Black;
display:table-cell;
background: -webkit-linear-gradient(top, #ccc 0%, #888 100%);
}
</style>
<table>
<tr>
<th>a</th>
</tr>
<tr>
<td>b</td>
</tr>
<tr>
<td>c</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("table").each(function(a,table){
var i=a;
$(table).after('<div class="table" id="table-'+i+'"></div>');
var currentTH = $(this).parent().find('th');
$(currentTH).each(function(){
var content=$(this).html();
$('#table-'+i).append(' <div class="tr"><div class="th">'+content+'</div></div>');
});
var currentTD = $(this).parent().find('td');
$(currentTD).each(function(){
var content=$(this).html();
$('#table-'+i).append(' <div class="tr"><div class="td">'+content+'</div></div>');
});
$(this).remove();
});
});
</script>
We had to upgrade wkhtmltopdf due to security reasons and we experienced the same problem, however after struggling with CSS I managed to find a solution that worked for us, for example, the following CSS:
.TableRecords_Header {
color:#EAEAEA;
font-weight: normal;
background: #0F5D85 url(/RichWidgets/img/bar_gradient.png);
white-space: nowrap;
line-height: 18px;
padding: 4px 6px 4px 6px;
border-right: 1px solid white;
font-size: 14px;
}
Applied to any table <th> or <tr> cells, renders something like this:
Gradient Bug
It turns out that this version of webkit has problems handling "repeat-x" CSS property, so, to solve this issue I have used this CSS3 Equivalent:
.TableRecords_Header {
background-repeat: no-repeat !important;
background-size: 100% 23px !important;
}
Where background-repeat: no-repeat !important; tells webkit not to use background repetition eliminating the problem.
As for background-size, the value 100% does the same as the original repeat-x, and the 23px is the height of the image that produces your gradient. in this case is the height of /RichWidgets/img/bar_gradient.png.
When we added this CSS3 style the PDF rendered correctly as shown in the following image:
Gradient problem solved
Best Regards,
Nuno Guedes
Use inline css for this page which convert to pdf.
I have a table sitting inside a div with a colored background. I'm using the border-style:inset for the whole table. Each row of the table needs to have a bottom border, which I have also accomplished. However, those bottom borders extend the full width of the table. I'd like to have some white space on the left and right, as if the table had wide white borders on the left and right.
How can I accomplish this and preserve the inset at the same time? The only thing I can think to do is nest everything inside an outer, one-cell table with the inset. Is there a more elegant way?
FWIW, here's my current code:
CSS
.table {
width: 274px;
height: 300px;
border-collapse: collapse;
background-color: #ffffff;
border-color: #999999;
border-style: inset;
}
.table td {
margin: 6px 0px 6px 10px;
padding: 6px 0px 6px 10px;
border-bottom:thin;
border-bottom-color: #999999;
border-bottom-style: solid;
}
HTML
<div id="item" class="color1">
<h3>TITLE</h3>
<table class="table">
<tr>
<td>TEXT R1<C1/td>
<td>TEXT R1 C2</td>
</tr>
<tr>
<td>TEXT R2 C1</td>
<td>TEXT RC C2</td>
</tr>
</table>
</div>
you could put
margin-right margin-left
of the table or
padding-left padding-right
depending how you want to see this blank space.
A table has the following attributes and associated CSS:
<table border="0" cellspacing="0" cellpadding="2" class="noborder">
.noborder { border: 0px; }
Yet it displays with a white border of 1px. Google Chrome Inspector shows there is an associated style in a "user agent stylesheet", with CSS of:
table { display: table; border-collapse: separate; border-spacing:
2px; border-color: gray; }
but this is not a white border. What CSS is generating the white border?
This CSS rule in your style.css is making the border
th,td {
border: 1px solid;
padding: 8px;
}
I want to use CSS to set a color of the outer border of the table ...
Then the inner cells would have different border color ...
I created something like this :
table {
border-collapse:collapse;
border: 1px solid black;
}
table td {
border: 1px solid red;
}
Problem is, the table's color change and become red as you can see here : http://jsfiddle.net/JaF5h/
If the border width of the table is increased to be 2px it will work : http://jsfiddle.net/rYCrp/
I've been dealing with CSS and cross browsers issues for so long ... This is the first time I face something like that and I am totally stuck ... No idea what to do!
Any one knows how to get that fixed with border-width:1px ?
I would acheive this by using adjacent selectors, like so:
table {
border: 1px solid #000;
}
tr {
border-top: 1px solid #000;
}
tr + tr {
border-top: 1px solid red;
}
td {
border-left: 1px solid #000;
}
td + td {
border-left: 1px solid red;
}
It's a little bit repetitive, but it acheives the effect you're after by setting the top and left borders of the first row and column respectively, then overwriting the 'internal' rows and cells with red.
This won't of course work in IE6 as it doesn't understand the adjacent selectors.
http://jsfiddle.net/JaF5h/36/
Try this:
tbody { display:block; margin: -1px; }
The previous answers didn't fully resolve this for me. The accepted answer allows the internal borders to overlap the outer table border. After some experimentation I came up with the following solution.
By setting the table collapse style to separate the internal borders do not overlap the outer. From there the extra and doubled borders are eliminated.
HTML:
<table>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
CSS
table {
border: 1px solid black;
border-collapse: separate;
border-spacing: 0;
}
table td, table th {
border: 1px solid red;
}
table tr td {
border-right: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td{
border-top: 0;
}
https://jsfiddle.net/o5ar81xg/
Create a div surrounding your table. Set the div border color for the outside of your table. DO NOT border-collapse your table. Instead, let your cells separate to show the (inner borders) background color of the div beneath. Then set the background cells to the background color of your choice.
HTML:
<div id="tableDiv">
<table id="studentInformationTable">
<!-- Add your rows, headers, and cells here -->
</table>
</div>
CSS:
#tableDiv {
margin-left: 40px;
margin-right: 40px;
border: 2px solid brown;
background-color: white;
}
table {
position: relative;
width: 100%;
margin-left: auto;
margin-right: auto;
border-color: brown;
}
td, th {
background-color: #e7e1d3;
padding: 10px 25px 10px 25px;
margin: 0px;
}
Try the following it worked for me:
table {
border-collapse: collapse;
border: solid #000;
}
table td {
border: 1px solid red;
}