Table Border in HTML/CSS - html

I am creating a table in HTML and trying to assign the cells a border. Here is how it appears.
See that weird border in 2nd row, last cell. That's the problem I am having.
<table class="info">
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td><span>0</span></td>
<td><span>0</span></td>
</tr>
</tbody>
</table>
Here's my css....
table.info {
width: 100%;
text-align: center;
}
table.info td {
background: #fff;
border: 2px solid #ccc;
text-align: center;
}
What am I doing wrong over here?
UPDATE - I checked the css being inherited and I found this...
table {
border-collapse:collapse;
border-spacing:0;
}


Your HTML is not correct. Either you must have equal no. of TDs in your each row or you can match markup by using rowspan/colspan.


for the last 2 rows make a cell with colspan=2..something like this:
<tr>
<td><span>0</span></td>
<td><span>0</span></td>
<td colspan="2"></td>
</tr>


Maybe this will help:
(HTML)
<table class="info">
<tbody>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
<td>Some text</td>
</tr>
<tr>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
<td><span>0</span></td>
</tr>
<tr>
<td>Some text</td>
<td>Some text</td>
<td colspan="2" class="empty"> </td>
</tr>
<tr>
<td><span>0</span></td>
<td><span>0</span></td>
<td colspan="2" class="empty"> </td>
</tr>
</tbody>
(CSS)
table.info {
width: 100%;
text-align: center;
}
table.info td {
background: #fff;
border: 2px solid #ccc;
text-align: center;
}
table.info .empty {
border:none;
}


ok i have tested it .. and it's not working on firefox.. but chrome and ie allow you to use tables with different numbers of columns on each row... as #chinmayee said, its not correct to do that, cause tables are only used to represent tabular data.. i'd sugest you to change your html and use divs with float to obtain the effect that you want..
good luck

Related

Set the proportions of cells at table correct

I have some problems with wrong calculating of cell's position and width.
Summary, problem:
Width of left column is increasing too fast(while inside text is writing), so that steal the space of right column, really important spase.
My code:
table {
width: 100%;
}
td {
border: 1px solid black;
}
<table>
<tr>
<td>This</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much space</td>
<td>1</td>
</tr>
</table>

table {
width: 100%;
}
td:first-child {
border: 1px solid black;
white-space: nowrap;
}
td:last-child {
border: 1px solid black;
width: 100%;
}
<table>
<tr>
<td>This</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much space</td>
<td>1</td>
</tr>
</table>

Is this what you are looking for?
table {
width: 100%;
}
td {
border: 1px solid black;
white-space: nowrap;
}
td:nth-child(2){
width: 100%;
}
<table>
<tr>
<td>This</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td>This text escapes too much space</td>
<td>1</td>
</tr>
</table>

Put all tables inside a div and put the div in middle with vertical scroll based on a set height

I have a sample html here.
<body>
<div>
<table id = "tbl_cusname" name = "tbl_cusname" class = "mytable" width = "300px" style="float: left">
...
<table id = "tbl_drnumber" name = "tbl_drnumber" class = "mytable" width = "60px" style="float: left">
...
and other tables
</div>
</body>
that as far as i know is all of my tables are encapsulated on the div.
I wonder how can i do the following?
Center it not the content but the div together with its content
Set height on it then put vertical scroll bar in case theres a overflow
tysm

To center the div, set width and margin like this:
.yourDivSelector{
width: 970px;
margin: auto;
}
To set the height, use min-height like this:
min-height: 100%;
For vertical scroll set:
overflow-y: scroll;

Hope you are looking for something like below snippet!
Add height and overflow to div.tableContainer
set margin: 0 auto to tables inside container
.tableContainer {
width: 100%;
height: 200px;
overflow: auto;
}
.tableContainer table {
margin: 0 auto;
}
<body>
<div class="tableContainer">
<table id="tbl_cusname" name="tbl_cusname" class="mytable" width="300px" border="1">
<thead>
<th>Head</th>
<th>Head</th>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
<table id="tbl_drnumber" name="tbl_drnumber" class="mytable" width="60px" border="1">
<thead>
<th>Head</th>
<th>Head</th>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
</div>
</body>

I hope this is what you have in mind -
For making the div centre I have used:
width: 70%;
margin: 20px auto;
20px just to give some space on top and bottom.
For making the div scroll on the overflow of content I have used:
max-height: 200px;
overflow-y: auto;
You can play with 200px as per your need.
A working sample for you.
div {
width: 70%;
margin: 20px auto;
max-height: 200px;
overflow-y: auto;
}
<body>
<div>
<table id="tbl_cusname" name="tbl_cusname" class="mytable" width="300px" style="float: left">
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
</table>
<table id="tbl_drnumber" name="tbl_drnumber" class="mytable" width="60px" style="float: left">
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
</table>
<table id="tbl_drnumber" name="tbl_drnumber" class="mytable" width="60px" style="float: left">
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
<tr>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
<td>Hi am sample text</td>
</tr>
</table>
</div>
</body>

You could use the margin: 0 auto way and add max-height to set a max height for the div then you can scroll, check the snippet below:
div {
width: 500px;
margin: 0 auto;
max-height: 300px;
overflow-y: scroll;
}
<body>
<div>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</div>
</body>
Hope this helps :)

Hovering child element of an even element using CSS

I need to set hover of 'a' element that is a child of 'tr', which is picked by nth-child(even) selector.
Basically I've got the normal table with multiple rows, and inside every table cell there is an 'a' link, that I want to highlight while hovered, but only in the even rows.
My CSS code:
.table-striped tr:nth-child(even) td a:hover {
color: #3c3c3c;
}
And it's not working.
How can I solve this?
.table-striped tr:nth-child(even) td a:hover {
color: Red;
}
<table class="table-striped">
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
<tr>
<td>Some text here</td>
<td>Click here
</td>
</tr>
</table>

The css you are using is working perfectly:
.table-striped tr:nth-child(even) td a:hover {
color: #3c3c3c;
color:red;/*for dislay i have use this red color;*/
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
<tr>
<td>link 1</td>
<td>link 2</td>
<td>link 3</td>
</tr>
</table>

Try this one:
.table-striped tr:nth-child(even):hover td a {
color: #3c3c3c;
}

How to stop browser from creating gap near table when browser scrollbar appears

A small gap occurs to the right of a table when the following conditions are met:
table border is greater than 1px
border-collapse is collapse
browser vertical scrollbar is visible
browser is firefox
Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:green;}
table
{
background-color:#fff;
width:600px;
border-collapse:collapse;
border:4px solid #222;
/*border-spacing:0;*/
margin: 0px auto;
}
tr {height:56px;}
td
{
font-family: trebuchet ms;
font-size: 10.0pt;
font-weight:bold;
border:1px solid #222;
padding-left:4px;
}
</style>
</head>
<body>
<table>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
<tr >
<td>some content</td>
<td>some content</td>
<td>some content</td>
</tr>
</table>
</body>
</html>
Any ideas are appreciated.

position div outside table along 3 row

Consider the following table
<table border="1">
<tr>
<td>some data</td>
<td>some data</td>
<td>&nbsp</td>
</tr>
<tr>
<td>some data</td>
<td>some data</td>
<td>need to display smthng here</td>
</tr>
<tr>
<td>some data</td>
<td>some data</td>
<td>&nbsp</td>
</tr>
</table>
I want to display something beside the second row. I've tried to have a third column and put &nbsp in cell(1,3) & cell(3,3) but it spoils the look as I need the table border also.
I think it would be better to position a div element outside the table but parallel to second row but I don't know how to do it. If I include a div element after second <tr>..</tr> ends, it doesn't help.
Can anyone suggest a solution ? I need the table borders.

You can collapse cells vertically with rowspan attribute
<table border="1">
<tr>
<td>some data</td>
<td>some data</td>
<td rowspan="3">need to display smthng here</td>
</tr>
<tr>
<td>some data</td>
<td>some data</td>
</tr>
<tr>
<td>some data</td>
<td>some data</td>
</tr>
</table>
You can check the output here : jsfiddle.net/8DcAB/

Like this ? http://jsfiddle.net/4NxY7/
position: absolute will strip the element from the flow, so there is not even the need to rowspan it.
<table border="1">
<tr>
<td>some data</td>
<td>some data</td>
</tr>
<tr>
<td>some data</td>
<td>some data</td>
<td style="margin-left: 5px; position: absolute;">
need to display smthng here
</td>
</tr>
<tr>
<td>some data</td>
<td>some data</td>
</tr>
</table>

Don't know what you want to show parallel to that row, but check this fiddle http://jsfiddle.net/mQZvx/ . Hope that Helps.
#myDiv{
position: relative;
float: right;
bottom:50px;
right:350px;
}