table, thead, tbody {
width: 100%;
}
table, th, tr, td {
border: 1px solid #000;
border-collapse: collapse;
}
td {
width: 25% !important;
}
<table>
<thead>
<th>
<td>ID</td>
<td>Nome da conta</td>
<td>Titular</td>
<td>Saldo</td>
</th>
</thead>
<tbody>
...
</tbody>
</table>
I have a table with four columns and I want them all the same width, i.e., each one occupying 25% of the table.
It happens that my columns are not taking 25% of the table width each, as I assumed they would. Even when I apply the !important.
You didn't used the semantic tags in a correct manner.
In thead tag you must have tr and th as it's children.
Then you can apply {width: 25%;} on the th
table,
thead,
tbody {
width: 100%;
}
table,
th,
tr,
td {
border: 1px solid #000;
border-collapse: collapse;
}
th {
width: 25% !important;
}
<table>
<thead>
<tr>
<th>ID</th>
<th>Nome da conta</th>
<th>Titular</th>
<th>Saldo</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
With table-layout: fixed
table {
table-layout: fixed;
width: 100%;
}
table,
th,
tr,
td {
border: 1px solid #000;
border-collapse: collapse;
}
td {
width: 25%;
}
<table>
<tbody>
<tr>
<td>ID</td>
<td>Nome da conta</td>
<td>Titular</td>
<td>Saldo</td>
</tr>
</tbody>
</table>
table {
table-layout: fixed;
width : 100% ;
}
td {
text-align : center ;
width: 25%;
}
<table border = "10">
<tr>
<td>Some Text</td>
<td>Another Text</td>
<td>Some Another Text</td>
<td>A Very Long Text</td>
</tr>
</table>
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 several tables. Some have 4 td in a row, some have 3 td in a row. Is there any smart way to make those td equal depend on the number of td in a row, since I don't want to write a specific css for each case.
For example, if a row have 4 td, each td's width should be 25% and 33.33% if a row have 3 td.
I'm using scss.
Edit: I'm also looking for a way that also meet this condition too: in a table, there is two rows, the first row has 2 td, the second row has 3 td and this table still meet my requirement.
For example, in this case, I want the td in the first row (which has 1 td) will have 100% width, not 25%
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
<table>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>
Thank you.
Use Below CSS
table {
table-layout: fixed;
width: 100%;
text-align: center;
border-collapse: collapse;
}
td, th {
border: 1px solid #dddddd;
padding: 8px;
}
Check Example here:- https://codepen.io/rvtech/pen/yLyewjG
You just need to use a fixed table layout and set the width of the table. I have included a few examples below.
.myTable, .subTable {
width: 200px;
table-layout: fixed;
}
td {
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<h1>1. table in a table(use a sub table that uses the same css)</h1>
<table class="myTable">
<tr>
<td>apple pie</td>
<td>orange tart</td>
<td>blueberry crumble</td>
</tr>
<tr>
<table class="subTable">
<tr>
<td>apple pie</td>
<td>orange chocolate</td>
</tr>
</table>
</tr>
<tr>
<table class="subTable">
<tr>
<td>meat pie</td>
<td>apple crumble</td>
<td>cranberry jam</td>
</tr>
</table>
</tr>
</table>
<hr>
<h1>2. use colspans that you will have to set via hand or javascript</h1>
<table class="myTable">
<tr>
<td>pumpkin pie</td>
<td>banana tart</td>
</tr>
<tr>
<td colspan="2">
blueberry pie
</td>
</tr>
</table>
<hr>
I have a table where I specify width:100% but I don't want to expand one particular column(image column) to expand. It it possible?
Sample example:
body {}
img.consoleIcon,
img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td,
table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table>
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
Now the above is simple example of a table without any width specified to it, now I go ahead & apply style width:100% but I don't want the image column(e.g Facebook) to expand.
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
You can set the width on the td element.
Here I define an icon-cell class, on the td element, and I am setting a width in CSS :
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th {
border: 1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
.icon-cell {
width: 50px;
}
<table style="width:100%">
<thead>
<th>Name</th>
<th>Age</th>
<th>Facebook</th>
<th>Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td class="icon-cell">
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
By applying the fixed width for table columns solved this problem.
Hope it is useful to you.
Here is my Code
<table style="width:100%">
<thead>
<th style="width:35%;">Name</th>
<th style="width:30%;">Age</th>
<th style="width:5%;">Facebook</th>
<th style="width:30%;">Twitter</th>
</thead>
<tbody>
<td>Shubh</td>
<td>33</td>
<td>
<a>
<img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
</a>
</td>
<td></td>
</tbody>
</table>
In CSS
body{
}
img.consoleIcon, img.ConsoleIconColumnHeader {
width: 17px !important;
height: 17px !important;
vertical-align: middle;
}
table td, table th{
border:1px solid #d0d0d0;
table-layout: fixed;
border-collapse: collapse !important;
}
Here is the Working Fiddle
[http://jsfiddle.net/1bn5ke9s/][1]
How can I?
Given the html coding below, how can I 1.) Lock the first row (table headers) from scrolling and 2.) Have an inner table border of 1px solid #cccccc
Thanks for all your help!
Jay
Style Coding:
<style type="text/css">
div#data_container {
width: 800px;
height: 75px;
overflow: auto;
border: 1px solid #cccccc;
}
table#data_tbl {
border-collapse: collapse;
table-layout: fixed;
}
table#data_tbl td {
border: 0px;
}
table#data_tbl tr:first-child td {
color: #235A81;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
}
</style>
Body:
<!-- START OF DATA CONTAINER -->
<div id="data_container">
<table id="data_tbl">
<td>File Number</td>
<td>Date Received</td>
<td>Request Type</td>
<td>Name</td>
<tr>
<td>12345678</td>
<td>08/01/2013</td>
<td>Billing</td>
<td>Joe Smith</td>
</tr>
<tr>
<td>09876543</td>
<td>09/01/2013</td>
<td>Technical</td>
<td>Nancy Edwards</td>
</tr>
<tr>
<td>11223344</td>
<td>10/01/2013</td>
<td>Operations</td>
<td>Jill White</td>
</tr>
<tr>
<td>45678931</td>
<td>12/01/2013</td>
<td>Billing</td>
<td>Michael Burns</td>
</tr>
<tr>
<td>85239975</td>
<td>09/01/2013</td>
<td>Support</td>
<td>Debbie Stewart</td>
</tr>
<tr>
<td>55667788</td>
<td>11/01/2013</td>
<td>Administrative</td>
<td>David Adams</td>
</tr>
</table>
</div>
<!-- END OF DATA CONTAINER -->
Easiest way is to use 3rd party plugin. check this out: http://dlippman.imathas.com/projects/tablescroller.php or try datatables.net
Style table for borders:
table {
position: relative;
}
table, th, td {
border: 1px solid #cccccc;
}
You can set style="overflow:hidden" on th tag when box appears. It will lock mouse scroll or use position:fixed on a box.
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>