I am creating a bunch of tables now as and when I add table header (<th>)table row <tr> and add border to it there are multiple borders coming up. I mean say I have two table headers in a row so each and every th tag will add its own border but I just want want border between the two table header's (th).
<table>
<th>Header1</th>
<th>Header2</th>
<tr><td>Data1</td><td>Data2</td> </tr>
</table>
If you refer the above code and if I add borders to say th tag there will be 2 borders between header1 and header2. I just want 1.
Your problem description is vague (in the future, please come up with an SSCCE, so that everyone can just copy'n'paste'n'run it to see what you exactly mean), but at least, a common solution to this "double border" problem is to add border-collapse: collapse property to the parent table in question:
table {
border-collapse: collapse;
}
Also see this Quirksmode article for several examples.
Set border-collapse:collapse for both table and th in your CSS:
table, th, td { border-collapse:collapse }
If you are guaranteed to have 2 and only 2 th columns, and if I'm reading your question right that you just want a border between the two (i.e. in the middle of the two th tags), then just apply a border-right to the left th:
table
{
border-collapse: collapse;
}
th.leftColumn
{
border-right:1px solid #000;
}
Markup
<table>
<tr>
<th class="leftColumn"> </th>
<th> </th>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
It's quick and dirty, but if you know you have only 2 columns it would work. Again this is assuming your question is that you want a border between two th cells, and nowhere else.
Related
I want to apply left border on my th element in table. The problem is, when I put border CSS style there is an empty "space" after line (tr) - see image.
<table>
<tr>
<th>
....
<th>
</tr>
<tr>
<th>
....
<th>
</tr>
</table>
I am using border-left: 1px solid #2185d0; for all th elements
But I want full line like this:
How can I do this?
Perhaps add this to your css?
table {
border-collapse: collapse;
}
I think the problem is in the CSS styles you are attributing to the table. It would really help if you could provide code snippits for that (specifically).
What I suspect is that you have either margin or padding settings that are preventing the table cells from touching eachother, thus producing a space between the border lines.
I have a Bootstrap table, I want to remove the lines between some of the rows in the table (at the end of the table) is there a quick way to achieve this?
You can remove the border from Bootstrap tables using the following CSS:
.table>tbody>tr>td,
.table>tbody>tr>th {
border-top: none;
}
This will override Bootstrap's td and th selector specificity and apply your border-top style instead of theirs.
Note that this will only apply to tr elements within the tbody. You'll need to add in styling for the thead and tfoot elements if you want this to work for those as well.
Now where you specify some of the rows, I'm guessing you don't want this applying to all of them. For that, simply add a new class to the tr elements you wish remove the border on, and include that class name in your CSS selector(s):
<tr class="no-border">...</tr>
.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
border-top: none;
}
For the rows in which you don't want border's to appear. Give them an additional class and add the border:none property to it.
For Ex : If you give the additional class name as .noborder to the element of the row.
Hope this helps you.
.noborder{
border:none;
}
<table border="1" width="100%">
<tr><td>Data 1</td></tr>
<tr><td>Data 1</td></tr>
<tr ><td>Data 1</td></tr>
<tr><td class="noborder">Data 1</td></tr>
<tr><td class="noborder">Data 1</td></tr>
</table>
You may use border-bottom: none; in your right selector. Please provide your html code so that we can figure out and analyze your structure.
<table class="table no-border">
<tr>
<td></td>
</tr>
</table>
i think you want to remove two remove vertical line between two row or column
go through this link to see demo LInk :- http://v4-alpha.getbootstrap.com/content/tables/
also you can apply
.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
border-top: none;
}
Can somebody help me? I'm trying to remove/hide border between table cells, but fail. Here's CSS I've tried to do this:
table, td, tr{
border-style: hidden;
background-color: white;
border-collapse:collapse;
border-spacing: 0px;
}
and here's my HTML:
<table>
<tbody>
<tr>
<td>HI</td>
<td>HI</td>
</tr>
<tr>
<td>HI</td>
<td>HI</td>
</tr>
</tbody>
</table>
and I'm still getting this:
Try using border: none
Also, right click on one of the cells and choose "Inspect Element" (in Firefox). Then on the right side of the new window (under Rules) you can see from where the border is coming (CSS).
Also be sure that you don't have any margin between the elements so that a possible background color from an element behind it could shine through. But that should be not really possible when using a table.
I would like the md-divider underline under each of my table rows. Especially since md-divider has the nice ng=if"!$last". But it seems like the ng-repeat has to go on the tr element so the divider couldn't go after the table row.
<tr ng-repeat="user in users" class="row">
<td>{{user.firstName}}</td>
<td>{{user.lastName}}</td>
</tr>
- I would want a divider here.
Note: I also tried just using a border and it doesnt even show up.
You can achieve it with css by giving border to <td> instead of <tr>
td{
border-bottom:1px solid #000; // change color and size accordingly
}
css border doesn't works in <tr> but you can apply it on <td> because both <td> in <tr> will have the same height so it will not create any problem.
I have two tables inside a table :
<table>
<tbody>
<tr>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Giải</th>
<th>#cityID</th>
</tr>
</tbody>
</table>
</td>
<td class="tdkqtb">
<table border="1">
<tbody>
<tr>
<th>Đầu</th>
<th>Đuôi</th>
</tr>
</tbody>
</table>
</td>
</tr>
<tr></tr>
</tbody>
</table>
Now I need to set the width of the two tables fixed. How can I do that? For example I want all tables to have the same width as the first twos. I mean they must have a fixed width for each column, the first table will contains 70% width of the parent table, and the second contains the rest. The columns in the two tables must have fixed width too!
Not sure if I understood what you want but you can just select the required element of the table or the whole table and give a width in css
table {
width: 70%;
}
If you have multiple tables, give them ids or classes to seperate for different styles. Same for the th, tr, td and so on.
First of all, why not going Tableless?
Then you have to put some CSS into it, like DasBoot said, to give a full table a width you should do this:
table {
width: 70%;
}
The same thing for specific td, tr, th or whatever element you want to style. If what you are going for is a maximum width or a minimum width you can use max-width and min-width appropriately. Why not put this code on a jsfiddle and test the results live to see what you need to do?
Regards.