I'm trying to align 3 tables so they form 1 big table.
The reason I want to do this is because I want to have scrollable table which works on tablets(ipad, android). I already got this working the only thing I still need to do is align the headers and footers with the content. My table layout looks like this :
<!-- Fixed header table -->
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead>
<th> Header 1 </th>
<th> Header 2 </th>
<th> Header 3 </th>
</thead>
</table>
<!-- Scrollable content table -->
<div class="scroll"> <!-- This div enables the table to be scrollable -->
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead> <!-- Use a thead or JQuery Mobile 1.4 gets mad -->
<tr> </tr>
</thead>
<tbody>
<!-- This is dynamically filled -->
</tbody>
</table>
</div>
<!-- Fixed footer table -->
<table data-role="table" class="ui-body-d ui-shadow table-stripe ui-responsive">
<thead>
<tr> </tr>
</thead>
<tfoot>
<tr>
<td> Footer 1 </td>
<td> Footer 2 </td>
<td> Footer 3 </td>
</tr>
</tfoot>
</table>
I already tried to give every cell a max width but it didn't seem to work.
Isn't there a default solution for this ?
Thanks in advance.
Edit:
I want it to be aligned like this :
http://i.imgur.com/Cipa9f6.png
You need to set table-layout to be fixed then only width works as expected.
table{
table-layout: fixed;
}
th,td{
width: 50px;
}
demo
table has auto by default so it will increase the width as your contents increases and by setting to fixed to will be fixed width.
Related
I want to add a button next to each row of my table. Plot twist, the table is inside a div with a fixed width and overflow-x for responsiveness. I want the button to show next to each row outside the container div.
With my current code, the button does show up next to the row but stays in the fixed div.
<div style="width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td>
<div style="position:relative; width:0px;">
<button style="position:absolute;left:10px;">Edit</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
The solution is using position sticky on the last column.
position: sticky; right: 0px
Reference : W3 Schools.
Here's the snippet:
<div style="width:100px; overflow-x: scroll;">
<table>
<thead>
<tr>
<th>ID</th><th>ID</th><th>ID</th><th>ID</th><th>ID</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td><td>1</td><td>2</td><td>3</td><td>4</td>
<td style="position: sticky; right: 0px">
<button>Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
I have a table with a table header to keep up with scrolling. When someone clicks on of the content rows it opens a few extra rows. The problem is that the header table doesn't change size to keep up with the content changes. The main goal would be to keep the header always on top and to match the size of the content when a row is clicked.
<div ng-app ng-controller="ctrl">
<table>
<tr style="background:red;">
<td>one</td>
<td>open</td>
</tr>
</table>
<div style="height: 66px; overflow-y: scroll;">
<table>
<tbody ng-repeat="item in items" ng-click="showSubs = !showSubs">
<tr>
<td>{{item.text}}</td>
<td>{{item.text2}}</td>
</tr>
<tr ng-repeat="sub in subItems" ng-show="showSubs">
<td colspan="2">
{{sub.text}}
</td>
</tr>
</tbody>
</table>
</div>
</div>
jsfiddle
This webapge I'm working on looks like this:
The HTML is loosely like this:
<div class="title">
<table>
<tr>
<td width="35%">Table 1a Header</td>
<td width="65%">Table 2a Header</td>
</tr>
</table>
</div>
<div class="padding-all">
<div class="body" style="width: 100%">
<div><table> <!-- table 1b... --></div>
<div><table> <!-- empty table for spacing --></div>
<div><table> <!-- table 2b... --></div>
</div>
</div>
What I would like to achieve is either:
1) Have the text in my <div class="title"> at the top align above the tables inside of my <div class="body">
OR
2) Have the "top" rows inside of the tables span the entire width of the page, so that there is no black whitespace, in essence making it appear similar to how the current title div appears.
Either way, I need the text for "1a" to align with "1b" and the same for 2a/2b. As well as have it with a gray background that spans the width of the page.
I'm much more of a developer than I am a designer and I cannot seem to figure out how I can get this to work. I've fudged around with the percentages for the title div's table data cells, but this only works on certain resolutions, otherwise it doesn't display correctly. What else can I do?
Depending on what you're trying to accomplish as a whole, one option is to embed your tables.
See my example in this jsfiddle where I've used the following code:
<table>
<thead>
<tr>
<th width="2%"></th>
<th width="33%">Table 1a Header</th>
<th width="2%"></th>
<th width="63%">Table 2a Header</th>
</tr>
<tr height="10px">
<td colspan="4"></td>
</tr>
<tr>
<td width="2%"></td>
<th width="33%">Table1b Header</th>
<td width="2%"></td>
<th width="63%">Table2b Header</th>
</tr>
</thead>
<tbody>
<tr>
<td width="2%"></td>
<td width="33%">
<table><!-- Content --></table>
</td>
<td width="2%"></td>
<td width="63%">
<table><!-- Content --></table>
</td>
</tr>
</tbody>
</table>
I have an alignment issue where the alignment of the background color of the first cell is little more compared to the other cell. I don't know why is it happening.
As in the screen shot the cell which has week has the alignment little higher compared to other cell. Why is this happening ?
How am I supposed to make it aligned properly? Please help me.
I updated your fiddle and added some background colors to it, as you can see in below html fragment.
<td style="text-align: left; padding-left: 10px;background-color: lime" >
<div class="ng-binding" ng-class="{'TODAY': 'todayDate'}[event.dayType]">Fri 1.</div>
</td>
<td colspan="7" style="background-color: red">
<table id="test" style="table-layout: fixed;background-color: aqua">
<tbody>
I've been trying to reset some of those element's CSS value, though they don't kick in, which makes me believe there is other settings somewhere in your CSS files using the same properties, likely with !important.
So, if you check the fiddle you'll see that the recolored td's is different in height and that should narrow down your problem.
Now it would be easier for your to check those settings, alter them some, to see how you can give them the same height.
One observation I made is, if you add a text like this <td colspan="7" style="background-color: red"> Test text <table id="test", you'll see that the red background appear and that background color doesn't have the alignment issue.
Here is one more fiddle update showing that: https://jsfiddle.net/enypgyt3/4/
<p>You should use proper table format like</p>
<p>Table should be proper nested </p>
<p>Table td and tr is not nested properly</p>
<p>Try to comment every table row(tr)</p>
<table border="1" cellspacing="0" cellpadding="5"> <!--table start------->
<tr> <!--tr start-->
<td>
<table>
<tr>
<td>one</td>
<td>Two</td>
<td>Three</td>
<td>four</td>
</tr>
</table> <!--/table inside td open and it should properly closed-->
</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr> <!--/tr end-->
<tr> <!--second row statr-->
<td colspan="4"> <!-- User proper Colspan for every td -->
One-four five six seven
</td>
<td>
Eight
</td>
</tr> <!--second row stard-->
<tr> <!--Third row start-->
<td colspan="5">
One-four five six seven eight
</td>
</tr>
<tr>
<td>One-four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</table>
<p>If possible try comment maximum tr and td </p>
<p>Follow code indentation</p>
This is my code:
I need to add a scroll bar in the body of the table, the header must remain constant.
The body cells are not properly fixing if I add a scroll bar.
I need to add a scroll bar in the body of the table, the header must remain constant.
The body cells are not properly fixing if I add a scroll bar.
<table width="600" border="1" style="border-collapse:collapse; border: 1px solid #AEAEAE;" cellpadding="0" cellspacing="0">
<tr>
<th rowspan="2">
Title
</th>
<th rowspan="2">
Title
</th>
<th colspan="4">
Title
</th>
<th colspan="2">
Title
</th>
</tr>
<tr>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
</tr>
<td height="400">
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
</tr>
Just give the table's tbody element a height and a scrolling overflow.
Like this:
.tableClass tbody
{
height: 300px; /* Random number I chose */
overflow: scroll /* you can be more specific and use overflow-y */
}
Edit:
I saw your code and your not using <tbody> and <thead>. Read about them. The general idea is to wrap the table's content with one element, and to wrap the table's headings with one element.
Here's a working example:
http://www.imaputz.com/cssStuff/bigFourVersion.html
None of the other solutions I've found met all my requirements, so I created a very lightweight jQuery plugin to do this. It supports fixed header, footer, column spanning (colspan), resizing, and an optional number of rows to display before scrolling starts.
jQuery.scrollTableBody (GitHub)
As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:
$('table').scrollTableBody();