I'm trying to do something very simple: create a table with single line borders.
There are many articles saying how to do that, and almost all of them include something like
table {
border-collapse: collapse;
}
td, th {
border: 1px solid orange;
}
Which works great.
But they all apply the styling universally to the td and th tags themselves, and therefore apply to all tables.
So I tried this
.bordered {
border-collapse: collapse;
border: 1px solid orange;
text-align: center;
color: blue;
}
<table class=bordered>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
I get a table with orange outer border, blue letters, and no internal borders.
I also tried
table.bordered, tr.bordered, td.bordered {
to no avail. Also putting "class=" on the tr tags didn't help.
I have learned that border properties are not inherited.
The DOM Inspector confirms that: just the color and centering are inherited by the td elements from the .bordered class.
My question is this:
How do I get borders on the cells without adding "class=" to every single td tag?
(A use case would if there are two tables on the page, and I want the borders styled differently for them).
Just take the css that works for all tables, and add table.bordered before all of them:
table.bordered {
border-collapse: collapse;
}
table.bordered td, table.bordered th {
border: 1px solid orange;
}
<table class="bordered">
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
<table>
<tr> <td> ABC </td> <td> DEF </td> </tr>
<tr> <td> HIJ </td> <td> JLK </td> </tr>
</table>
I need to wrap text within a <td> element, but I can't use the css table-layout property as the output is to html e-mail body and Outlook doesn't support the table-layout property.
Is there some other way to wrap text within a <td> element, or do I need to do the line breaking and measuring manually in code?
Here is an example of what I am trying to acheive:
td {
border: solid black 1pt;
font-family: arial;
font-size: 10pt
}
thead td{
text-align:center;
font-weight:bold;
}
table {
border-collapse: collapse
}
<html>
<body>
<table style="width:35pt;height:24pt;table-layout:fixed">
<thead>
<tr>
<td style="width:35pt;height:12pt">Good</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt;word-wrap:break-word">Costingly Cost Cost</td>
</tr>
</tbody>
</table>
<div style="height:50pt"></div>
<table style="width:35pt;height:24pt;">
<thead>
<tr>
<td style="width:35pt;height:12pt">Bad</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width:35pt;height:12pt" nowrap>Costingly Cost Cost</td>
</tr>
</tbody>
</table>
</body>
</html>
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
That should fix things.
You can try this:
<tr>
<td nowrap>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
<td>Never increase, beyond what is necessary, the number of entities required to explain anything</td>
I have a for loop that should populate a table as in following diagram:
Age is is in the first row which is a table header, then there are three rows and each has three columns. First row contains images, second is simply a horizontal line (must not be a row, could be bottom border of previous row), and the third is numeric scale i.e. 18-29, 30-50, 50+.
My HTML:
<table >
<tr>
<td>Age</td>
</tr>
<tr *ngFor="let age of age_range">
<td>{{age}}</td>
</tr>
</table>
and css:
table , tr {
border-bottom: 1px solid;
}
How can I apply css to it to look like in the diagram? Right now I get like following:
it should work like this
<table >
<tr>
<td colspan="3">Age</td>
</tr>
<tr>
<td *ngFor="let age of age_range">{{age}}</td>
</tr>
If you don't know the the exact columns number you can use age_range.length, in Angularjs it's done like this colspan="{{age_range.length}}" ,it's probably the same in Angular 2.
.border-bottom {border-bottom: 1px #ccc solid;}
table {width: 100%;}
<table>
<tr>
<td colspan="3">Age</td>
</tr>
<tr>
<td class="border-bottom">11111</td>
<td class="border-bottom">22222</td>
<td class="border-bottom">33333</td>
</tr>
</table>
I'm trying to multiplication table in html, but it requires only a border below the top row and to the right of the left row. Everything within the table will not be separated by borders. However, I feel stumped because I think you cannot do this, is it even possible to only add a border to one cell?
edit: dear freinds i have discovered an image from the internet that demonstrates what I am trying to achieve. http://i.stack.imgur.com/y364h.jpg For my table, is it possible to only have borders corresponding to the bold border from the image within my html table?
You need to work with CSS. Here is a sample I am providing
<html>
<head>
<title>Border-Test</title>
<style>
.border-side {
border-right: 1px solid black;
}
.border-bottom td {
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<table cellpadding="2" cellspacing="0">
<thead>
<tr><td colspan="5">Addition</td></tr>
</thead>
<tbody>
<tr class="border-bottom">
<td class="border-side"> </td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">0</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">1</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">2</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td class="border-side">3</td><td>0</td><td>1</td><td>2</td><td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is the output of above
NOTE : You need to change the table cell data which I haven't changed.
NOTE : You also must need to specify the cellspacing="0".
I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it yet.
Anyways, I have a table with multiple rows and columns, some merged with rowspan and colspan, and I'd like to put a simple border around parts of the table. Currently, I'm using 4 separate CSS classes (top, bottom, left, right) that I attach to the <td> cells that are along the top, bottom, left, and right of the table respectively.
.top {
border-top: thin solid;
border-color: black;
}
.bottom {
border-bottom: thin solid;
border-color: black;
}
.left {
border-left: thin solid;
border-color: black;
}
.right {
border-right: thin solid;
border-color: black;
}
<html>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td class="top left">one</td>
<td class="top right">two</td>
</tr>
<tr>
<td class="bottom left">three</td>
<td class="bottom right">four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td class="top bottom left right" colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</html>
Is there any easier way to do what I want? I tried applying top and bottom to a <tr> but it didn't work. (p.s. I'm new to CSS, so there's probably a really basic solution to this that I've missed.)
note: I do need to have multiple bordered sections. The basic idea is to have multiple bordered clusters each containing multiple rows.
How about tr {outline: thin solid black;}? Works for me on tr or tbody elements, and appears to be compatible with the most browsers, including IE 8+ but not before.
Thank you to all that have responded! I've tried all of the solutions presented here and I've done more searching on the internet for other possible solutions, and I think I've found one that's promising:
tr.top td {
border-top: thin solid black;
}
tr.bottom td {
border-bottom: thin solid black;
}
tr.row td:first-child {
border-left: thin solid black;
}
tr.row td:last-child {
border-right: thin solid black;
}
<html>
<head>
</head>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr class="top row">
<td>one</td>
<td>two</td>
</tr>
<tr class="bottom row">
<td>three</td>
<td>four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr class="top bottom row">
<td colspan="2">hello</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
</body>
</html>
Output:
Instead of having to add the top, bottom, left, and right classes to every <td>, all I have to do is add top row to the top <tr>, bottom row to the bottom <tr>, and row to every <tr> in between. Is there anything wrong with this solution? Are there any cross-platform issues I should be aware of?
If you set the border-collapse style to collapse on the parent table you should be able to style the tr:
(styles are inline for demo)
<table style="border-collapse: collapse;">
<tr>
<td>No Border</td>
</tr>
<tr style="border:2px solid #f00;">
<td>Border</td>
</tr>
<tr>
<td>No Border</td>
</tr>
</table>
Output:
I was just playing around with doing this too, and this seemed to be the best option for me:
<style>
tr {
display: table; /* this makes borders/margins work */
border: 1px solid black;
margin: 5px;
}
</style>
Note that this will prevent the use of fluid/automatic column widths, as cells will no longer align with those in other rows, but border/colour formatting still works OK. The solution is to give the TR and TDs a specified width (either px or %).
Of course you could make the selector tr.myClass if you wanted to apply it only to certain rows. Apparently display: table doesn't work for IE 6/7, however, but there's probably other hacks (hasLayout?) that might work for those. :-(
Here's an approach using tbody elements that could be the way to do it. You can't set the border on a tbody (same as you can't on a tr) but you can set the background colour. If the effect you're wanting to acheive can be obtained with a background colour on the groups of rows instead of a border this will work.
<table cellspacing="0">
<tbody>
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tbody bgcolor="gray">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tbody>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tbody bgcolor="gray">
<tr>
<td colspan="2">hello</td>
</tr>
<tbody>
<tr>
<td colspan="2">world</td>
</tr>
</table>
The only other way I can think of to do it is to enclose each of the rows you need a border around in a nested table. That will make the border easier to do but will potentially creat other layout issues, you'll have to manually set the width on table cells etc.
Your approach may well be the best one depending on your other layout rerquirements and the suggested approach here is just a possible alternative.
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td>
<table style="border: thin solid black">
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
<tr>
<td>
<table style="border: thin solid black">
<tr>
<td>hello</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">world</td>
</tr>
</table>
Based on your requirement that you want to put a border around an arbitrary block of MxN cells there really is no easier way of doing it without using Javascript. If your cells are fixed with you can use floats but this is problematic for other reasons. what you're doing may be tedious but it's fine.
Ok, if you're interested in a Javascript solution, using jQuery (my preferred approach), you end up with this fairly scary piece of code:
<html>
<head>
<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
box(2, 1, 2, 2);
});
function box(row, col, height, width) {
if (typeof height == 'undefined') {
height = 1;
}
if (typeof width == 'undefined') {
width = 1;
}
$("table").each(function() {
$("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
$("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
$("tr", this).slice(row - 1, row + height - 1).each(function() {
$(":nth-child(" + col + ")", this).addClass("left");
$(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
});
});
}
</script>
</head>
<body>
<table cellspacing="0">
<tr>
<td>no border</td>
<td>no border here either</td>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
<tr>
<td>three</td>
<td>four</td>
</tr>
<tr>
<td colspan="2">once again no borders</td>
</tr>
</tfoot>
</table>
</html>
I'll happily take suggestions on easier ways to do this...
Group rows together using the <tbody> tag and then apply style.
<table>
<tr><td>No Style here</td></tr>
<tbody class="red-outline">
<tr><td>Style me</td></tr>
<tr><td>And me</td></tr>
</tbody>
<tr><td>No Style here</td></tr>
</table>
And the css in style.css
.red-outline {
outline: 1px solid red;
}
the trick is with outline property thanks to enigment's answer with little modification
use this class
.row-border{
outline: thin solid black;
outline-offset: -1px;
}
then in the HTML
<tr>....</tr>
<tr class="row-border">
<td>...</td>
<td>...</td>
</tr>
and the result is
hope this helps you
An easier way is to make the table a server side control. You could use something similar to this:
Dim x As Integer
table1.Border = "1"
'Change the first 10 rows to have a black border
For x = 1 To 10
table1.Rows(x).BorderColor = "Black"
Next
'Change the rest of the rows to white
For x = 11 To 22
table1.Rows(x).BorderColor = "White"
Next