We have a table on html page which contains around 20 columns. We were not able to adjust the width of each <td> and later we found that since the page is too congusted with columns the browser(chrome and explorer) over rides the width property of <td> and pack the <td> blocks close to close. Is there a way to adjust the <td> width so that the <td> blocks are sufficiently apart.
thanks in advance.
You can adjust a width of each column using <Col> tag.
Example:
<table border="1" width="100%">
<col width="100">
<col width="75">
<tr>
<th>Name</th>
<th>Place</th>
</tr>
<tr>
<td>Venkat</td>
<td>India</td>
</tr>
<tr>
<td>Peter</td>
<td>USA</td>
</tr>
</table>
use CSS.
If you want to give same width to all td you can try the below code.
<style type='text/css'>
.mytable td,.mytable th{
width:100px;
}
</style>
<table border="1" class="mytable">
<tr>
<th>Name</th>
<th>Place</th>
</tr>
<tr>
<td>Venkat</td>
<td>India</td>
</tr>
<tr>
<td>Peter</td>
<td>USA</td>
</tr>
</table>
if all td will have different sizes you can try the below code,
<style type='text/css'>
.mytable .firstth{
width:100px;
}
.mytable .secondth{
width:250px;
}
</style>
<table border="1" class="mytable">
<tr>
<th class='firstth'>Name</th>
<th class='secondth'>Place</th>
</tr>
<tr>
<td>Venkat</td>
<td>India</td>
</tr>
<tr>
<td>Peter</td>
<td>USA</td>
</tr>
</table>
most probably giving width to th will arrange the corresponding td properly.
demo at http://jsfiddle.net/jdp7v/
Related
I want to make table like this. A has 5row and B has 2.5row. I show another question about rowspan vlaue have to be integer. So I tried to revise totalrow is 6 and A is 6row , B is 3row, C is 1row and one is 2row. But I can't do like this image. If you can solve it, please talk to me.
Here's a basic example for you. You add the rowspan to the TD Tag and then on the subsequent rows, you have 1 less TD tag
table, tr, td { border:1px solid black; border-collapse: collapse }
<table>
<tr>
<td rowspan="2">Row Span 2</td>
<td>Normal Column</td>
</tr>
<tr>
<td>Normal Column</td>
</tr>
</table>
EDIT - Taking into account the fact that column B is 2.5 rows tall, and after review of the other answer, here is complete method, which uses both an extra table and rowspan
table, tr, td { border:1px solid black; border-collapse: collapse }
<html>
<body>
<table border=1 width=100% height=100%>
<tr>
<td rowspan="5">A</td>
<td rowspan="5" height=100%>
<table border=1 width=100% height="100%">
<tr>
<td>B1</td>
</tr>
<tr>
<td>B2</td>
</tr>
</table>
</td>
<td>C1</td>
</tr>
<tr>
<td>C2</td>
</tr>
<tr>
<td>C3</td>
</tr>
<tr>
<td>C4</td>
</tr>
<tr>
<td>C5</td>
</tr>
</table>
</body>
</html>
I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)?
html:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Browser:
Because the table have CSS attribute margin-bottom: 20px, you need to add an override CSS to remove this attribute:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table table-no-margin" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
.table-no-margin { margin: 0 }
</style>
This is happening because your nested table has a margin-bottom of 1rem(default bootstrap css). override it that's it.
Working example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%; margin-bottom:0px;">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This question has been asked many times before, but I'll answer it specifically for your scenario. It's not an issue of removing padding/margins.
In order to get a 100% height table, it's container must also be 100% height. So in this case set the containing td to height: 100%...
Demo on Codeply
<td>REVERT</td>
<td style="padding:0;height: 100%;">
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
I am having troubles trying to make this work the way I want.
I have a table with a fixed height. And all tr I put inside this table grow in height to use all available table's height, although tr have a specific height
For example my table has widht: 1000px and if I only have 1 row, this row will be 1000px high, if I have 2 rows, each one will be 500px high
Here is a simple fiddle https://jsfiddle.net/6wfbohbh/2/
table { height:1000px; }
tr {height: 100px; }
How can I have the tr use their heights and not be relative to the tables height?
do not set height unless you need it :
example shrinking header to the height it needs to hold content and let other rows to spray.
table {
height:400px;/* to see demo */
float:left;
border:solid red 1px;
}
/* see tds */
td {border:solid;}
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr style="height:1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
</tbody>
</table><table>
<thead>
<tr >
<td>no height given on thead tr</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr>
<td>Hello</td>
<td>Hola</td>
</tr>
<tr>
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
that's about what you can do if td's content is even ...
If you want to keep tr's to that 100px height even there is not enough to keep them, then use a pseudo to fake last row:
tbody:after {
content:'';
display:table-row;
height:100%;
}
<table style="height:1000px;">
<thead>
<tr style="1%">
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 100px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 100px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
I am not sure what you end result should look like, but if you need to specify a width of a container, why dont you use div instead. Here is your updated example:
https://jsfiddle.net/6wfbohbh/8/
<div style="height:1000px; background:lightblue">
<table style="background:lightgreen">
<thead>
<tr>
<td>English</td>
<td>Spanish</td>
</tr>
</thead>
<tbody>
<tr style="height: 50px;">
<td>Hello</td>
<td>Hola</td>
</tr>
<tr style="height: 50px;">
<td>Bye</td>
<td>Adios</td>
</tr>
</tbody>
</table>
</div>
What i'm trying to achieve here is to lock the HEADER and FIRST COLUMN so I can see what day it is and which name i'm under at all times while scrolling up/down or left/right.
I have tried some jquery plugins that make this happen but when the table cells are excessive, it tends to timeout on IE...so i would rather do this with PURE CSS..
Anyone have some valid input on this?
JSFIDDLE:
http://jsfiddle.net/dd5ysjus/15/
i would paste code here but its too much...
here is my css:
div.horizscroll {
overflow: scroll;
width: 600px;
height: 150px;
}
.header {
background: #D7DF01;
}
its hard to find things in it but anyway
add class fix which you want to fixed
.fix{ position:fixed; background:#fff;}
and
div.horizscroll {
overflow-x: scroll;
position:relative;
width: 600px;
}
hope it will help
Try this
<html>
<style>
table{border-collapse:collapse;}
table th{width:100px;}
.container{overflow:scroll;border:solid 1px red;width:700px;height:300px;}
.inner-table{position:relative;float:left;}
.inner-table tr td{padding:53px;background:#ccc;}
</style>
<body>
<table border=1>
<th></th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<tr>
<td class="first-td">First Column</td>
<td colspan="6" rowspan="4" style="padding:0;width:200px">
<div class="container">
<table border=1 class="inner-table">
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td class="first-td">First Column</td>
</tr>
<tr>
<td class="first-td">First Column</td>
</tr>
<tr>
<td style="height:16px;"></td>
</tr>
</table>
</body>
</html>
It Works!
But you must set the row height inside the container row according to your data needs.
You can also achieve this by changing html structure, please check your updated fiddle - http://jsfiddle.net/dd5ysjus/12/
<table class="table-intro">
..//here goes titles
</table>
<div class="horizscroll">
...//here all data you have
</div>
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>