Consider the following table
<table border="1">
<tr>
<td>some data</td>
<td>some data</td>
<td> </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> </td>
</tr>
</table>
I want to display something beside the second row. I've tried to have a third column and put   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;
}
Related
My table is 100% width, how can I say in CSS: "the width of columns 2 and 3 should be as small as possible, without the content breaking."
I added style width, but it's not very recommended for the responsive. I didn't found any rule to do this.
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
<p>I would like to do a bit like this (but of course without specific width) :</p>
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th style="width:40px">Value</th>
<th style="width:40px">ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
Thank you !
You can set the width on table cells and it'll still expand to fit the content. Set the width to 0 and to stop it breaking can use the white-space:nowrap; css property. Just apply it to the columns you need using the nth-child() (and derivatives) selectors. It's also good to style your table in css rather than adding the style attribute to each cell, mainly when debugging problems. See the following example:
table {
width:100%;
}
table td:last-child, table td:nth-last-child(2) {
width:0px;
white-space:nowrap;
}
<table>
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes and No</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
More info here on css selectors the white-space property
th {
width: 100%;
}
<table style="width: 100%;" >
<tbody>
<tr>
<th>Name : long width</th>
<th>Value</th>
<th>ID</th>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Yes</td>
<td>12</td>
</tr>
<tr>
<td>This is a very long row td</td>
<td>Ni</td>
<td>13</td>
</tr>
</tbody>
</table>
I want to make a table that have only one title at the center and two or three columns as of this picture. https://drive.google.com/open?id=1IDfBI09c5Oo4HYJKTmIb5LY97HFVfJLr
I tried the following to complete table as shown in picture above but it is not being properly aligned exactly as of picture.
<table>
<tr>
<th>Title</th>
</tr>
<tr>
<td>A</td>
<td>some textt</td>
</tr>
<tr>
<td>B</td>
<td>b</td>
</tr>
<tr>
<td>C</td>
<td>c</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
Use colspan=2 to make the th cell span two columns.
Add a bit of css to format the table as desired
table{border-collapse:collapse;}
tr,td{border:1px solid #aaa;}
td,th{text-align:center;padding:5px 10px;}
<table>
<tr>
<th colspan=2>Title</th>
</tr>
<tr>
<td>A</td>
<td>some textt</td>
</tr>
<tr>
<td>B</td>
<td>b</td>
</tr>
<tr>
<td>C</td>
<td>c</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
Updated
To show centering of table header.
Also note that <table> is 1990s tech. A much better replacement has been recently introduced: CSS Grid. CSS Grid uses DIV structures instead of tables, and new CSS3 instructions that format the divs into table structures. It is MUCH more flexible than the old <table></table> structure, and, frankly, easier (once the table has become complex). References:
W3Schools basic intro
CSSTricks Complete Guide
GridByExample
NB: this final one by the editor of the excellent SmashingMagazine
Added colspan the html attribute for table tag, please following of the code.
<table>
<tr>
<th colspan="2">Title</th>
</tr>
<tr>
<td>A</td>
<td>a</td>
</tr>
<tr>
<td>B</td>
<td>b</td>
</tr>
<tr>
<td>C</td>
<td>c</td>
</tr>
<tr>
<td>some text</td>
<td>some text</td>
</tr>
</table>
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.
I have a table like so:
<table class="data">
<thead>
<tr class="columns">
<th>
</th>
<th>
<h2>Title</h2>
</th>
<th>
<h2>Location</h2>
</th>
<th>
<h2>Download</h2>
</th>
<th>
<h2>Analytics</h2>
</th>
<th>
<h2>Uploaded</h2>
</th>
<th>
<h2>Updated</h2>
</th>
</tr>
<thead>
<tbody>
<form>
<tr class="row">
<td><input type="checkbox" name="ID" value="1" /></td>
<td>Some Title</td>
<td>Some Url</td>
<td>Some Url</td>
<td>view Analytics</td>
<td>Some person</td>
<td>Some info</td>
</tr>
<tr class="row">
<td><input type="checkbox" name="ID" value="2" /></td>
<td>Some Title</td>
<td>Some Url</td>
<td>Some Url</td>
<td>view Analytics</td>
<td>Some person</td>
<td>Some info</td>
</tr>
</form>
<tbody>
</table>
I want to insert another tr containing tds at the bottom of the table (just after the </form> tag), however I do not want their width to be effected by or effect the other tds above them.
The table has no set widths and sizes to it's content.
How would I go about this?
Add another table in the last cell:
<tr>
<td colspan="6">
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
You can not do that unless you add your <tr>, combine all <td>-s into one (colspan) in it and put a nested table inside that <td> - in that new table you can set your <td>-s width
See colspan and rowspan attributes. To be perfectly flexible you should make another table under the above table. Make the above table style="margin:0;" and the below table have something like style="margin:0;position:relative;top:-2" to make it seem like they're connected. This would be tricky to make it look the same cross browser though.
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