This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Apply style in a table to specific columns within the th and td
I have a table and I need to be able to assign different styles to different columns, I need: -
The first two columns in the table header (header1 and header 2 to be given text-align:left; then all the remaining headers within the table header to be given text-align:center;
Similar thing with the table rows, the first two for all rows in the table to be given text-align:left; then the rest of the tds given text-align:center;
So basically the first two columns throughout the table will be left, then remaining be centered??
`
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
</tr>
Assuming your table has a class mytable:
.mytable td, .mytable th {
text-align: center;
}
.mytable td:first-child, .mytable td:nth-child(2) {
text-align: left;
}
.mytable th:first-child, .mytable th:nth-child(2) {
text-align: left;
}
This can be written more compactly as:
.mytable td, .mytable th {
text-align: center;
}
.mytable td:nth-child(-n+2) {
text-align: left;
}
.mytable th:nth-child(-n+2) {
text-align: left;
}
Related
I have 2 tables using DataTable :
top: exact match
bottom : related
Here is what they look like right now.
As you can see that, there is no need to show the table header on the second table. I want to hide it.
I have tried using this on my CSS :
Since the class = inventory_related
.inventory_related table thead {
display:none;
}
I also tried to take off the whole :
<thead class="thin-border-bottom ">
<th>Catalog # </th>
<th>Description</th>
<th>Available Vials</th>
</thead>
This doesn't work either.
Anyone have any suggestion on how do I hide my 2nd table header ?
Thanks.
In my case, setting
.inventory_related thead {
display:none;
}
messed with column widths, while
.inventory_related thead {
visibility: collapse;
}
seems to be working.
<table>
<thead style='display:none;'>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
Please see the following code as an example:
.inventory_related thead {
display: none;
}
<table>
<thead>
<th>header 1</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 1</td>
<td>row value 2</td>
</tbody>
</table>
<table class='inventory_related'>
<thead>
<th>header</th>
<th>header 2</th>
</thead>
<tbody>
<td>row value 3</td>
<td>row value 4</td>
</tbody>
</table>
if the class of <table> is inventory_related then write the following css
.inventory_related thead {
display:none;
}
If you want to do it in jQuery(js) then you can simply do:
$("#datatableId").css("display", "none");
where 'datatableId' is the ID of your table or some div tag which contains the table.
I am using float in css to display multiple tables vertically next to one another however float puts them without any spacing in between. How can I insert some gaps betwen these tables?
table{
float: left;
border:none;
border-collapse: collapse;
}
you shall use the margin property
table
{
margin:0 10px;
}
For info, the 0 corresponds to the above and under margin, and the 10 for the left and right margin.
You could also write it like margin(0 10px 0 10px); which stands for up - right - bottom - left
here you can use the {display:inline} instead of float
or you can use the padding or margin between tables/elements
table{
display: inline;
border:none;
border-collapse: collapse;
margin:0px 0px 0px 10px
}
I guess you're looking for this: JSFiddle
HTML
<table border="1" class="table1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<table border="1" class="table2">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
CSS
.table1 {
float: left;
margin-right: 15px;
background: red;
}
.table2 {
float: left;
background: blue;
}
NOTE: I made table1 with margin-right - this will separate from table2. If you have more them 2 tables, add margin-right in left tables, or margin-left in right tables.
Is it possible at all?
I have table that fills its container. (width 100%)
Two of its columns (1st and 3rd) have minimum width, but middle one does not.
When I am narrowing the window, I want 1st and 3rd columns to stay at minimum width, while middle column have to collapse completely (when window is too narrow, just 1st and 3rd columns must be displayed).
Thanks.
There is simplified code of what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>My first styled page</title>
<style type="text/css">
.overflow{
text-overflow: ellipsis;
word-break: break-all;
word-wrap: break-word;
}
.table{
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
.first{
min-width: 20px;
}
</style>
</head>
<body>
<table class="table">
<tr>
<td class="first"><div class="overflow">oneoneoneone</div></td>
<td class="second"><div class="overflow">twotwotwotwo</div></td>
<td class="first"><div class="overflow">threethreethree</div></td>
</tr>
</table>
</body>
</html>
You could do this with some basic CSS styling & media queries, here's an example
<table border=1>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td>Row 4 Col 1</td>
<td>Row 4 Col 2</td>
<td>Row 4 Col 3</td>
</tr>
</tbody>
<style>
#media only screen and (max-width:500px){
table td:nth-child(2), table th:nth-child(2) {
display:none;
}
}
</style>
So when the screen is smaller than 500px, the 2nd column will hide.
Fiddle showing it in action: http://jsfiddle.net/9rEgQ/2/
You could use CSS and a media query to hide the middle column when the screen reduced to a specified width.
For example:
#media all and (max-width:500px) {
.second {
display: none;
}
}
In this example, the second column would not be displayed when the screen was reduced to a width of less than 500px
I have a table and I want to be able to assign specific styles within CSS to certain columns in the table: -
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
<td>row 1, cell 4</td>
<td>row 1, cell 5</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
<td>row 2, cell 4</td>
<td>row 2, cell 5</td>
</tr>
</table>
I want to be able to give the first 2 th only the style of text-align:left; and the remaining th = text-align:center;.
The standard and direct solution :
th {
text-align:center;
}
tr th:nth-child(1), tr th:nth-child(2) {
text-align:left;
}
The advantage of this notation is that it's easy to change it to apply for example to the fourth and sixth th instead of the first two.
Note that this supposes the availability of CSS3 in the browser.
If you want to be compatible with IE8, you might do it easily in javascript :
var ths = document.getElementsByTagName('th'); // replace document by your table if necessary
for (var i=2; i<ths.length; i++) ths[i].style.textAlign="center";
or with jQuery :
$('th').each(function(){
if ($(this).index()>=2) $(this).css('text-align', 'center');
});
CSS3 way
th {
text-align:center;
}
th:nth-child(0), th:nth-child(1) { text-align:left; }
CSS2 Way
th{
text-align:center;
}
th:first-child, th:first-child + th{
text-align:left;
}
Do this
th:first-child, th:first-child + th{
text-align:left;
}
th + th + th{
text-align:center;
}
live demo http://tinkerbin.com/B5Zi88Pp
how can i increase the space in this table "Row 1, cell 1"?
<html>
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
</html>
pls check here for the image:
http://img227.imageshack.us/img227/6166/htmln.png
is this correct:
<table border="1" td.my-cell { padding:100px; }>
<tr>
<td class="my-cell">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can either use cellpadding or using css
.cellpadding {
padding-left: 5px;
padding-right: 5px;
}
<td class="cellpadding">Row 1, cell 1</td>
EDIT Your edited post is wrong....do this:
<table border="1">
<tr>
<td style="padding-left: 5px; padding-right: 5px;">Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
You can add a class to that specific cell and then use that class-name to apply css:
.larger {
height: 2em;
width: 4em;
padding: 2em;
}
<!-- rest of table -->
<td class="larger">Row 1, cell 1</td>
<!-- rest of table -->
Or you could use specific style-rules to apply a particular style:
tr td:first-child /* selects the first td within a tr */
Though this would apply to the first td of every row.
elaborate on "space"? you can add padding to the td if thats what you mean by "space"
table td { padding:5px; }
if you just want that cell bigger, add a calss
table td.my-cell { padding:5px; }
<td class="my-cell">Row 1, cell 1</td>
or do you mean
<td>Row 1, cell1</td>
you can increase the space between words like this:
table td { word-spacing: 20px; /* adjust */ }