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>
Related
I have table:
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="width: 50%;text-align: left;">1000</span> / <span style="width: 50%;text-align: right;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="width: 50%;text-align: left;">250.50</span> / <span style="width: 50%;text-align: right;">Day</span></td>
</tr>
</tbody>
</table>
Need that 1000 and 250.50 were under the word Price, Hour and Day were under the word Einheit. I tried do it using width property and text-align but it doesnt work.
Need this result, for example:
https://clip2net.com/s/3ZXsphT
Thanks
By Default span tag is inline element, it doesn't take width. You need to change span tag to block label element using display or float. check updated snippet below...
td span {
display: inline-block;
width: 47%;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span style="width: 50%;text-align: left;">Price</span> / <span style="width: 50%;text-align: right;">Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span style="text-align: right;">1000</span> / <span style="text-align: left;">Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span style="text-align: right;">250.50</span> / <span style="text-align: left;">Day</span></td>
</tr>
</tbody>
Add this CSS
table tr td:nth-child(even){
text-align:center;
}
<table border="1" width="100%">
<thead>
<tr>
<th width="50%">Name</th>
<th width="50%"><span>Price</span> / <span>Einheit</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td><span>1000</span> / <span>Hour</span></td>
</tr>
<tr>
<td>Name2</td>
<td><span>250.50</span> / <span>Day</span></td>
</tr>
</tbody>
</table>
Actually, you don't need any single span as none was executed.
price / Einheit was centered only as this is the default of th tag
So, in order to align the cell beneath it, you can just code td style=" text-align:center"
and if you want to align all cells to the center
table style="text-align:center"
I have this nested table. In one of the <td> I'd like to have a scrollable div.
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:scroll;'>This DIV should have a large width</div></td>
</tr>
</tbody>
</table>
When I insert 800px as the div width, it is displayed correctly. But, If I insert 1000px the display output is broken. Ideally, I need it up to 5000px++.
I'm not sure if this is what you wanted. This will keep your requested 5000+px width all the time, while inside a smaller scrollable div. (btw overflow-x: auto; means that it will only show the scrollbar when the content is actually overflowing rather than all the time)
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:auto;'>
<div style='width:5000px;'>This DIV should have a large width</div>
</div></td>
</tr>
</tbody>
</table>
I hope this helps :)
I think you need to have your width as 25% and 75% since in your <thead> the first two columns account for 25% and the third 75%. So your translate the same to the <tbody>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;">
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;width:25% !important;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:75% !important;overflow-x:scroll;position:relative;'>This DIV should have a large width</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a table header that needs (I believe) to stay in a separate table due to positioning reasons. What is the best way to tell the table header to determine its column spacing based on the tbody contents below that rest inside a different <table>? Due to some constraints in the structure of what I am working on it would be difficult to move these into the same table, so that probably isn't an option, unfortunately.
For example, I have something like this:
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<th>Five</th>
</tr>
</thead>
</table>
<div>
<p>Some keys here about what highlighted text below means</p>
</div>
<table>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
The top table header is in a fixed position so the table and key will just scroll behind it as a user scrolls the table. I cannot figure out a way to get the TH to match the TDs below like they normally do when combined in the same table. Is there a trick I am unaware of to make them part of the same data set?
The simplest way is to ensure that both the tables has the same parent element. Then set the width of the th and first rows td tags to relative percentage,
so that since both the elements have the same parent, their widths will match also. Like shown below.
html,
body {
margin: 0px;
}
table {
width: 100%
}
<table border="1" class="fix">
<thead>
<tr>
<th style="width:20%">One</th>
<th style="width:20%">Two</th>
<th style="width:20%">Three</th>
<th style="width:20%">Four</th>
<th style="width:20%">Five</th>
</tr>
</thead>
</table>
<div>
<p>Some keys here about what highlighted text below means</p>
</div>
<table border="1">
<tbody>
<tr>
<td style="width:20%">One</td>
<td style="width:20%">Two</td>
<td style="width:20%">Three</td>
<td style="width:20%">Four</td>
<td style="width:20%">Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
This was for the table td issue. Now the position fixed for the header can be implemented like so.
html,
body {
margin: 0px;
}
.fix {
position: fixed;
top: 0px;
}
.offset {
margin-top: 50px;
}
table {
width: 100%
}
<table border="1" class="fix">
<thead>
<tr>
<th style="width:20%">One</th>
<th style="width:20%">Two</th>
<th style="width:20%">Three</th>
<th style="width:20%">Four</th>
<th style="width:20%">Five</th>
</tr>
</thead>
</table>
<div class="offset">
<p>Some keys here about what highlighted text below means</p>
</div>
<table border="1">
<tbody>
<tr>
<td style="width:20%">One</td>
<td style="width:20%">Two</td>
<td style="width:20%">Three</td>
<td style="width:20%">Four</td>
<td style="width:20%">Five</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
</tr>
</tbody>
</table>
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>
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>