I'm about to create a table which is going to look like this one right here:
Now it's getting tricky since the website is going to be responsive. That's why I thought it would be nice to wrap the table in a div .cross-tab which has overflow: scroll.
<div class="bs-example">
<div class="cross-tab">
<table>
<thead>
<tr>
<? for ($i=0; $i < 19; $i++) { ?>
<th>
<img src="http://placehold.it/40x40" class="team-icon">
</th>
<? } ?>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
</div>
The div should have a certain width the overflow: scroll. So the table would be full-sized on any device but get cropped off on small screens with a scrollbar to scroll arround:
Is there a way to accomplish this with pure CSS or do I have to calculate the full table with with js and so on?
You can fix your problem with media query.
For example :
HTML
<body>
<div>
<table border="1" cellspacing="2" cellpadding="0">
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
<tr> <td> </td> </tr> <tr> <td> </td> </tr>
</table>
</div>
</body>
CSS
div
{
background : red;
width:100%;
overflow:auto;
}
table
{
width :100%;
overflow:hidden;
}
#media screen and (max-width: 640px)
{
table
{
width : 800px;
}
div
{
height:200px;
}
}
codepen : http://codepen.io/ColoO/pen/xuACl
Related
I have a problem using Bootstrap tables in Angular:
My <td> tags does not fit the corresponding <th> from my tableheader: I am not sure, if it is caused due my calls to the template presenting the <td>:
Here is my code:
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Students</th>
<th>Links</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of tests">
<app-preview-container id={{c.id}} name={{c.name}} description={{c.description}} studentCount={{Count[c.id]}}"></app-preview-container>
</tr>
</tbody>
</table>
And thats the component which gets called (<app-preview-container>):
<td>
{{name}}
</td>
<td>
{{description}}
</td>
<td>
{{count}}
</td>
<td>
some buttons
</td>
Does anyone has a tip how I can fix that? I have tried a lot using Bootstrap width-params like w-xx or col-md-x or col-x or using scope="col"/"row". But none of these fixed it.
Tables often look that way when you change <tr> / <td> display property. HTML tables have their own unique display properties display: table-row; and display: table-cell;.
You either have done that or wrapped your <td>s with additional div.
You can inspect your table in the console, and check if <td>s are direct children of <tr> and then set by hand <tr> and <td> display property to table-row and table-cell.
An example of a broken table:
td {
border: 1px solid gray;
}
*[style] {
outline: 2px dashed red;
}
<table>
<tr>
<td>
Column 1
</td>
<td>
Column 2
</td>
<td>
Column 3
</td>
</tr>
<tr>
<tr style="display: block;">
<td>
Broken
</td>
<td>
Row
</td>
<td>
!
</td>
</tr>
<tr>
<td style="display: inline-block;">
Broken td
</td>
<td>
!
</td>
<td>
!
</td>
</tr>
<tr>
<td>
Correct
</td>
<td>
row
</td>
<td>
!
</td>
</tr>
</table>
I have a nested table inside each cell of my outer table.I want to set a background image for one of the cells so I created a specific class called "innerraya" to set the background image for that nested table.However,nothing seems to be changed at all.
HTML
<td class="luar">
<table class="innerraya">
<tr>
<td>7</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3" id="d7">
<p id="d7Event"></p>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td style="text-align:right">29</td>
</tr>
</table>
</td>
CSS
.innerraya
{
width:100%;
height:100%;
position:absolute;
background-image:url("daunketupat.jpg");
}
OUTPUT
it works now but the whole table is screwed up
The image is there if I used it as a td background or a normal img src but does not work if the whole table background is changed.What is the reason?
IT IS SOLVED!
The issue is that inner table layout is not fixed so I had to add this code inside the innerraya class.
table-layout: fixed;
The whole code looks like this :
table.innerraya
{
width: 100%;
height: 100%;
table-layout: fixed;
background-image: url("daunketupat.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
OUTPUT
Please go the url below, I have created a jsfiddle for you:
https://jsfiddle.net/ew55L41b/
Hope this will help you :)
Also the code is below:
<table>
<tr>
<td>
<table class="innerraya">
<tr>
<td>7</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3" id="d7">
<p id="d7Event"></p>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td style="text-align:right">29</td>
</tr>
</table>
</td>
<td>
<table class="">
<tr>
<td>7</td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="3" id="d7">
<p id="d7Event"></p>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td style="text-align:right">29</td>
</tr>
</table>
</td>
</tr>
</table>
CSS---
table.innerraya
{
width:100%;
height:100%;
position:absolute;
background-image: url("http://www.w3schools.com/cssref/paper.gif");
}
I have a page with 3 tables inside, one of which is generated from server data and can have any number of rows. The other 2 tables are used to float on top and display buttons and table headers that can be visible at all times. Here is some code:
<table style=" position:absolute, top: 110px; z-indez:1; width:100%;">
<tr>
<td>
<table>
<tr>
<td> Cart </td>
<td> Quantity </td>
</tr>
</table>
</td>
</tr>
</table>
<table style="margin-top:60px; height:auto; width:100%;">
#foreach (var item in Model) {
<tr>
<td>
#Html.Partial("MoreInformation", item)
</td>
</tr>
}
</table>
<table style="position:absolute; bottom:100px; height:70px; width:100%;">
<tr>
<td>
<table>
<tr>
<td style="text-align:left;">
<button type="button" onclick="window.location.href='/Home/Index'">Go Home</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
There is a problem with this setup:
I have a menu on the left side. When I collapse it, the table with MoreInformation follows is smoothly, but the other 2 tables stay fixed on their positions.
How can I make the "floating on top" tables move along with the data table (the table with MoreInformation?
P.S. I have tried placing the 2 tables inside a div, making that div position:fixed and the table inside position:relative but it does not work.
<table style=" position:absolute, top: 110px; z-indez:1; width:100%;">
<tr>
<td>
<table align="left">
<tr>
<td style="text-align:left;">
<button type="button" onclick="window.location.href='/Home/Index'">Go Home</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td> Cart </td>
<td> Quantity </td>
</tr>
</table>
</td>
</tr>
</table>
<table style="margin-top:60px; height:auto; width:100%;">
#foreach (var item in Model) {
<tr>
<td>
#Html.Partial("MoreInformation", item)
</td>
</tr>
}
</table>
I have a scenario where one table had some tr and other table have less tr's than first one table.Both tables are under td's. In this Scenerio how to increase only last tr height of html table in % mode not in px mode
HTML CODE:
<table border="1" style="width:100%">
<tr>
<td style="width:50%">
<table border="1" style="width:100%">
<tr>
<td>
A
</td>
</tr>
<tr>
<td>
B
</td>
</tr>
<tr>
<td>
C
</td>
</tr>
</table>
</td>
<td style="vertical-align:top">
<table border="1" style="width:100%;">
<tr>
<td>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
</td>
</tr>
jsfiddle Demo
Try like this: Demo This will expand only last row of right side content
CSS:
table {
height: 100%;
width: 100%;
}
td {
}
.table {
display: table;
height:100%;
}
.cell {
vertical-align: top;
display: table-cell;
height:100%;
}
.container {
height: 100%;
-moz-box-sizing: border-box;
}
HTML:
<table border="1" style="width:100%;" class="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td class="cell">
<div class="container">Increse this row height till parents td height</div>
</td>
</tr>
</table>
EDIT: If you want right column should be equally expanded, you can use like this: Demo
CSS:
table {
height: 100%;
width: 100%;
}
Hope this is what you want!!
use single table and rowspan
<table border="1" style="width:100%">
<tr><td>A</td><td>1</td></tr>
<tr><td>B</td><td>2</td></tr>
<tr><td>C</td><td rowspan="3">3</td></tr>
<tr><td>D</td></tr>
<tr><td>E</td></tr>
</table>
I have some nested tables. There is the main, outer table, it has to nested tables for the left and right columns, and in each column some tables are stacked on top of each other. What I can't seem to figure out is how to get the tables in the column to all span the same width (mostly in the right column). Here is the HTML, scaled down for readability:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2" style="margin-top:20px; margin-left:86px">
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<tr>
<td>
<table class="cell" id="t3">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t4">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t5">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t6">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t7">
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t8">
</table>
</td>
</tr>
<tr>
<td>
<table class="messages" id="t9">
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
.outer
{
margin: auto;
}
.column
{
border: none;
margin-left: auto;
margin-right: auto;
}
table.cell
{
border-collapse: collapse;
}
#rightColumn table
{
padding: 10px;
width: 100%;
}
Any advice is appreciated.
If you really want to nail down table column widths, use the table-layout: fixed CSS property on the table and specify widths for all of the cells in the first row (or use col elements if you're starting with no first row).
So the CSS I had was valid. Firefox had actually cached an older CSS for this page. The widths went to 100% as soon as I cleared the cache.