Is there an easy way to create vertical dividers between HTML table columns? I want to add thick bars, but the only good way I've seen to do this is to distort table data add TD's.
Is there a way to add vertical dividers between columns of a table using only jQuery+CSS?
My table structure is pretty simple.
<table>
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
what you are searching for is a attribute for the tag and it is called rules:
http://www.htmlcodetutorial.com/tables/_TABLE_RULES.html
<table rules="cols">
<thead><tr><th>...</tr></thead>
<tbody><tr>...</tr>...</tbody>
</table>
You can style it using the css border properties. But the advantage over using a border on every cell is the fact that it will not add a border at the right side of the table (or the last cell actually) so you don't have to add a special class to the last cell to overwrite the border.
EDIT: Add the attribute border="0" to the tag if you don't want a border around the whole table (or not left/right of the first/last column).
EXAMPLE: http://jsbin.com/ixire
Using the cell border is one option you can use but there's another:
I'm not sure if you can change your table structure but if you can, use the colgroup and col tags for table. I did a quick test in latest of FF, Chrome and Opera and it worked in all:
<style type="text/css">
table {
border:1px solid #ccc;
border-collapse:collapse;
}
.col {
border-right:10px solid blue;
}
</style>
<div id="tDiv">
<table border="1">
<colgroup class="col">
<col width="200" />
</colgroup>
<colgroup class="col">
<col width="200" />
</colgroup>
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>
<tbody>
<tr>
<td>one one</td>
<td>one two</td>
</tr>
</tbody>
</table>
</div>
I did not get a change to test in IE (any versions of it) though.
Generally done with border on the right (or left) of each cell.
This -> http://jsfiddle.net/XFtBR/ should give you a start point.
Related
I have a html table with id. It has two columns, the first one has text and the second column has a path to images that should be the background in the first row.
The second column must be hidden, but the cells in the first row must have the background based on the image path present in the second column.
Thanks in advance!
HTML CODE!
<html>
<head>
<title>Table</title>
<style>
#tab1, table, tr, td{
border: 1px solid;
}
</style>
</head>
<body>
<table id="tab1">
<tr>
<td>apple</td>
<td>c:\Users\bta\Pictures\apple_logo.png</td>
</tr>
<tr>
<td>orange</td>
<td>c:\Users\bta\Pictures\orange_logo.png</td>
</tr>
<tr>
<td>mango</td>
<td>c:\Users\bta\Pictures\mango_logo.png</td>
</tr>
<tr>
<td>peach</td>
<td>c:\Users\bta\Pictures\peach_logo.png</td>
</tr>
</table>
</body>
</html>
If you add anything between the tags (<>text</>), it will always works as plain text. If you want to add the background in html you have to do this inside the tag e.g. <td style='background:"c:\Users\bta\Pictures\orange_logo.png"'>some text here</td>
Initially, I can't change the class name for instance:
<table class="firsttable"> This is the firstable that must be left align
<tbody>
<tr>
<td>
<table class="firsttable"> And this is the second table that must be center align
<tbody>
<tr>
<td>
How do I code it in css?
You can use below CSS, It works as intended
<style>
.firsttable:nth-child(1) { text-align:left; }
.firsttable:nth-child(2) { text-align:right; }
</style>
It's CSS3 though.
First table CSS selector:
.firsttable:first-of-type
If second table is last:
.firsttable:last-of-type
Otherwise, second table CSS selector is this:
.firsttable:nth-of-type(2)
Use ids:
HTML:
<table class="firsttable" id="table1">
...
</table>
<table class="firsttable" id="table2">
...
CSS:
#table1 {
text-align:left;
}
#table2 {
text-align:right;
}
Does this work?
In this case it is better or from my sense I always make it by adding an inline style in the table and I think their no need to create any other style for it in CSS.
<table class="firsttable" style="text-align:left"> This is the firstable that must be left align
And the second table may be another inline style of text-align:center
<table class="firsttable" style="text-align:center"> And this is the second table that must be center align
It is the best approach. But you can also can create some different id here or
.firsttable:nth-child(1) { text-align:left; }
.firsttable:nth-child(2) { text-align:center; }
Problem in this is if you use it then if another table appear in this web page area than it will arise a problem. So it is better to use inline style in this case.
If you want to move the table to the left and one to the right add the following to the appropreate table.
For the align right. Add this at the opening tag <table>.
style="float:right;"
For the algin left add the same code to the exactly same place but change the "left" to "right" depending on where you want it to be.
To aling text do as the other people have seggested.
J. Carter :)
I'm trying to adopt Semantic-UI and I'm having some trouble. I'd like to get row selection to work in a table.
I'm using their sample HTML below:
<table class="ui selectable celled table">
https://jsfiddle.net/yjuoqdcy/
You can see that hovering over the rows does nothing. I'm guessing I'm missing some sort of behavior or event hook up but I cannot find much in the documentation.
Thanks for your helps.
It appears that you are using an old version (1.11.8) of the Semantic UI framework. Upgrading to the the latest version will allow you to use row selection without the need of custom CSS.
selectable table was introduced in version 2.0.0. - Release notes
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<table class="ui selectable celled table">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>No Action</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
</tr>
<tr>
<td>Jill</td>
<td>Denied</td>
</tr>
</tbody>
</table>
Do you mean you want the background of the cell to change colour when you mouse over it?
If so all you need is something like this.
table tr:hover {
background: #CCCCFF;
}
https://jsfiddle.net/link2twenty/cae2k9fy/
You can add custom style to the rows using tr:hover. Do styling as necessary with
tr:hover {
background-color: #f5f5f5;
}
https://jsfiddle.net/Pugazh/yjuoqdcy/3/
My table headers are much wider than the data in the table, so I am trying to rotate the text in the headers to save space.
I've been trying out the suggestions in this question, and I've also taken a look at this and this.
However, none of the answers seem to actually work: here is my attempt in a JSFiddle.
The text can rotate, but the <th> elements don't resize properly, which was the whole point of trying to rotate the text.
Now that it's been 2-4 years since those questions have been asked, are there any new solutions to this problem?
You could use CSS to select the thead and size the rows accordingly:
DEMO: http://jsfiddle.net/uo44ub6L/
CSS:
thead th {
height: 130px;
}
Another method would be to use rowspan="5" to create a larger th but you would need to add some blank rows, and you would get the same effect. Either would work.
If you need to do this dynamically, you could use javascript to select the th and adjust the size on the span length and font size.
You can use
writing-mode: vertical-rl; text-orientation: mixed;
this will get the work done for you , Here is JSFiddle of it .
This is now possible without any browser specific transforms that you used in your attempt. Note that the wrapping span is required as of 2022 in order to get firefox in particular to center the rotated text within the column (webkit does this by default). I also suggest you rotate the text at a slight angle as demonstrated here as it (IMHO) makes it easier to read.
<style type="text/css">
#myTable td {
text-align: right;
}
th.r span {
transform: rotate(185deg);
writing-mode: vertical-lr;
}
</style>
<table id="myTable" border="1" cellpadding="2" style="border-collapse:collapse;">
<tr>
<th class='r'><span>Display</span></th>
<th class='r'><span>Year made (TV?)</span></th>
<th class='r'><span>Native Res</span></th>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);">Dell U2410 (game) </td>
<td>2010</td>
<td>1080p</td>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);">Dell U2410 (sRGB)</td>
<td>2010</td>
<td>1080p</td>
</tr>
<tr>
<td style="color:rgb(17, 85, 204);"> Sony 40VL130 (game)</td>
<td style="color:rgb(0, 0, 255);">2008</td>
<td>1080p</td>
</tr>
</table>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
Looking for a solution to create a table with a scrollable body, and a static/fixed header.
Searching around seems to produce MANY flaky pieces of code, either not working in IE, requiring a huge amount of Javascript and tweaking, or a silly amount of CSS hacks etc.
To be honest, if it's a case of CSS hacks or Javascript, I think I'd prefer to go the Javascript option.
The alternative I guess is to place it all in a div, and just scroll the entire table - but that's a bit naff :D
I've just put together a jQuery plugin that does exactly what you want. Its very small in size and really easy to implement.
All that is required is a table that has a thead and tbody.
You can wrap that table in a DIV with a classname and the table will always resize to fit in that div. so for example if your div scales with the browser window so will the table. The header will be fixed when scrolling. The footer will be fixed (if you enable a footer). You also have the option to clone the header in the footer and have it fixed. Also if you make your browser window too small and all columns can't fit...it will also scroll horizontally (header too).
This plugin allows the browser to size the columns so they aren't fixed width columns.
you just pass the DIV's classname to the plugin like so: $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); and the plugin will do the rest. FooterID is a element on the page that contains the mark-up for your footer. this is used if you want to have pagination as your footer.
If you have multiple tables on the page it will also work for each table you want to have a fixed header.
check it out here: http://fixedheadertable.mmalek.com/
Keep in mind its still 'beta' so I am adding new features and bug fixes daily.
Supported browsers: IE6, IE7, IE8, FireFox, Safari, and Chrome
Here is a link to my response to another person who had the same question: Frozen table header inside scrollable div
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .
The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.
CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.
If you can fix the column widths - it's a lot easier. If you want the browser to figure out the widths, it gets a lot harder. Basically, have the table in div that scrolls (height, overflow:auto) and have that div inside a position:relative div. In the outer div, have another div position:absolute, overflow:hidden, height: whatever the header height is, set this div's innerHTML to the innerHTML of the inner div; Here is a page that demonstrates. There are lots of gotchas, but it's doable...
<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
<div id="inner" style="height:100px; overflow:auto;">
<script>
var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
var width = Math.floor(Math.random() * 100);
var d = '';
for(var i = 0; i < width; i++){d += 'a';}
for(var i = 0; i < 100; i++){
html += '<tr><td>' + d + '</td><td>some more data</td>';
}
html += '</table>';
document.write(html);
</script>
</div>
<div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>
<script>
function doit(){
var inner = document.getElementById('inner');
var secondWrapper = document.getElementById('secondWrapper');
secondWrapper.innerHTML = inner.innerHTML;
}
</script>
</body>
</html>
Note as you refresh and the data size changes, the header matches up perfectly. That's the real trick.
I believe that the solution is to set an explicit height for the tbody and set the overflow to auto or scroll. Unfortunately, as you've discovered, tables and CSS are a tricky combination, and IE likes to choke on it.
How about this:
<table style="width: 400px;">
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>
There was also a quiz for just this sort of thing on Sitepoint, for those looking for a non-JS solution. However I found that the table footer was necessary for stopping the table headers from collapsing their widths IF the contents of the cells weren't wide enough. I ended up hiding the tfoot in the application I used this on.
It's pure HTML/CSS and works in IE6 plus modern browsers. There are some styling limitations for the header though.