Is there any way i can set padding to the thead alone of a table?
table th
{
padding:15px;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Jhon</td>
<td>Smith</td>
<td>$200</td>
</tr>
</table>
<style>
table, td, th { border : 1px solid black; }
th { padding : 13px; }
td { padding : 15px; }
</style>
Related
I have an html Document with CSS and try the following:
I want to have an Background-Image in <Thead>. This Image should be in the Background of the other td´s. Maybe an overlay?
I want to get the following solution (Note: The Image must be in the thead. The other Td must be without an Background-Image)
Why should I need it?
We are using an online-built-in-software that converts html outputs in pdf. And the thead is the only markup that repeats on every page. Other solutions for repeating a header doesn't work.
A Background-Image at TBody doesn't work for me, because it doesn't repeat when the pagebrake come.
Edit: Update with codes and clearify my question
So Here is a simple code where I start (Thanks to #NickVU)
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: yellow
}
thead {
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
So at the End, i want to get the following output. (Like the img. above)
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: yellow
}
table {
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
background-repeat: no-repeat;
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
Note: But the img must be linked at the thead
UPDATED
According your requirement update, now I briefly understood your case.
That's impossible to have background-image with overflow, BUT we can do it with pseudoelement ::before on thead. Here is an example
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: white;
position: relative;
}
thead::before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
background-repeat: no-repeat;
}
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>
OLD ANSWER
I think you just simply put it in your CSS
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
thead, tbody {
background-image: url("https://www.w3schools.com/cssref/paper.gif");
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
P/s: I'm using W3 school image for the demo. You can replace it with your own image.
I have a little spesific question. I'm adding border-spacing: seperate to my table. But i want to add border-spacing to only thead tag. Is it possible?
What you can do (if you want border around your thead cells) is to wrap then in a span and manipulate it using css:
table {
border: solid 1px black;
}
table thead th {
padding: 20px;
}
table thead th span {
border: solid 1px black;
}
<table>
<thead>
<tr>
<th>
<span>Month</span>
</th>
<th>
<span>Savings</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
I need to create an invoice with HTML table, td, tr.
I need something like this
that every item in the invoice is in a new row, but a row without border.
I have tried to add a class for tr element
border: 0px solid black;
but it is not working properly. Can you advise please?
In this snippet is created a table, but there are borders everywhere
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
Use Border style in CSS like below to remove Border of <tr> <td> in Table.
border-right:none;
border-left:none;
border-bottom:none;
border-top:none
Is it solved ?
Set border for table but for cells you have to specify a custom class to each cell according to its position. I suggest 4 kinds of borders on top, right,bootm and left. Also do not forget to set border-collapse for table to collapse TD borders on each others:
table {
border:1px solid #000000;
border-collapse:collapse;
}
td{
padding:10px;
}
.tB{
border-top:1px solid #000000
}
.rB{
border-right:1px solid #000000
}
.bB{
border-bottom:1px solid #000000
}
.lB{
border-left:1px solid #000000
}
<table>
<tr>
<td class="rB">test</td>
<td class="bB">test</td>
</tr>
<tr>
<td class="rB bB">test</td>
<td class="bB">test</td>
</tr>
</table>
You can use a specific class with style property border:0 to remove the borders form individual row.
Find the solution (on top of your snippet) below:-
tr.noBorder td {
border: 0;
}
tr.noBorder td:first-child {
border-right: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr class="noBorder">
<td>January</td>
<td>$100</td>
</tr>
<tr class="noBorder">
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
</body>
</html>
table
{
background-color: lime;
border-collapse: collapse;
}
tr
{
border-width: 0 0 1px 0;
border-style: solid;
}
tr:last-child
{
border: none; // so the last child from thead and tbody dont have border
}
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</tbody>
</table>
Now, I want a transparent border between the rows, but only the rows within tbody, but not between thead and tbody.
First, I tried
table {
border-collapse: collapse;
tr {
border-width: 0 0 1px 0;
border-style: solid;
}
tr:last-child {
border: none; // so the last child from thead and tbody dont have border
}
}
In the case, I get the border on the element I wanted, but it's black and not transparent.
Then I tried with border-spacing:
table {
border-spacing: 0 1px;
tr:last-child {
border: none;
border-spacing: none; //those two don't seem to work
}
}
Now I have transparent borders, but there are borders before and after the thead as well, which I can't eliminate.
So, I have now either:
1. border only in tbody but not between thead and first data row(good), but the borders are not transparent(bad)
or
2. transparent border(good), but unwanted border between thead and first data row(bad).
Is there a way to combine this so I have transparent border, but NOT between thead and first data row?
edit:
I want the border to be full transparent, but as soon as I set the border-color with rgba(0,0,0,0), the border "disappears". Ok, it doesn't really disappeares, but take the background-color from td(the lightgrey color, which is a rgba value as well) and I have no idea why.
use border-color: rgba(0,0,0,.5);
<!DOCTYPE html>
<html>
<head>
<style>
table
{
background:yellow;
border-spacing: 0;
}
tbody tr:not(:last-of-type) td
{
border-width: 0 0 5px 0;
border-style: solid;
border-color:black;
border-color: rgba(0,0,0,.5);
}
</style>
</head>
<body>
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</body>
</html>
The problem is that your table has a background color. If you make the border fully transparent, it is transparent, but it won't show you what's behind the table. You're seeing the table's background-color. Also, since you're using a table, any reason you don't just use border-spacing instead?
But rgba(0,0,0,0) for the border color could work as well I suppose.
table
{
border-spacing: 0 20px;
}
tr
{
background-color: lime;
}
tr:last-child
{
border: none; // so the last child from thead and tbody dont have border
}
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</tbody>
</table>
Edit:
A way to achieve this is to use an :after on the tr of the thead, so you can "simulate" a border.
thead {
background: lime;
tr:after {
background: lime;
content: "";
height: 2px;
position: absolute;
left: 56px;
top: 77px;
width: calc(100% - 111px);
}
}
With this, you can place the "border" on top of the space between thead and the tbody. Obviously, this may not be the best solution, but I couldn't find another way.
Example: https://jsfiddle.net/qapmqfau/6/
Added an empty table row after each row
<!DOCTYPE html>
<html>
<head>
<style>
table
{
border-spacing: 0;
border-collapse:collaspe;
}
th
{
background:pink;
}
tr:nth-child(even)
{
background:transparent;
height:2px;
}
tr:nth-child(odd)
{
background:green;
}
</style>
</head>
<body>
<table>
<thead>
<th>Rank</th>
<th>Player</th>
<th>Pts</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>player1</td>
<td>50</td>
</tr>
<tr></tr>
<tr>
<td>2</td>
<td>player2</td>
<td>40</td>
</tr>
<tr></tr>
<tr>
<td>3</td>
<td>player3</td>
<td>30</td>
</tr>
<tr></tr>
<tr>
<td>4</td>
<td>player4</td>
<td>40</td>
</tr>
</body>
</html>
I have two tables that show data from database.
Now I set 1st table for headlines and 2nd table for the data.
I set like this
<table class="t_status">
<td>No</td>
<td>Name</td>
<td>Address</td>
</table>
In table #2
<table class="t_status">
<td>1</td>
<td>Michael</td>
<td>California</td>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
Now facing the problem when data display, table 1 and table 2 set different width.
This is the CSS
table
{
empty-cells: show;
border-collapse: collapse;
width: 100%;
}
.t_status
{
border-collapse: collapse;
background: #fff;
border: 1px solid #d9d9d9;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;
width: 100%;
margin-top: -1px;
}
.t_status td, th
{
border-top: 1px solid #c0c0c0;
border-bottom: 1px solid #c0c0c0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
padding: 10px;
font-size: 40pt;
font-weight: bold;
}
.t_status td
{
color: #fff;
background-color: #000;
}
.t_status th
{
font-size: 40pt;
color: #fff;
}
Try to put them like this:
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
and
<table class="t_status">
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</table>
if am correct you are using two tables for scrolling effect of head and data, so you will get table header for all the data.
to achieve this effect you can try using jquery table jtable
sample code
Your html syntax is incorrect. Use tr tags:-
<table class="t_status">
<tr>
<td>No</td>
<td>Name</td>
<td>Address</td>
</tr>
</table>
You should put all information into one table, thus you can assure that the rows have the same width.
<table class="t_status">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Michael</td>
<td>California</td>
</tr>
<tr>
<td>2</td>
<td>Greg</td>
<td>LA</td>
</tr>
</tbody>
</table>
<thead></thead> and <tbody></tbody> are not necessary.
It seems that you have forgot the <tr> tags. By the way, if you want to preserve your markup (correct or not, but two different tables), you can try with nth selectors and give a fixed width to each cell:
.t_status td:nth-child(1) {
width:2em;
}
.t_status td:nth-child(2) {
width:5em;
}
.t_status td:nth-child(3) {
width:5em;
}
Here's a working example.