column width not controlled by row above it - css

Putting 2 one-row tables after each other I get the desired outcome: 2 adjacent rows that don't have the same column width. http://jsfiddle.net/x2SQN/
---------------------
|100px | 100% - 100px|
---------------------
| 50% | 50% |
---------------------
Can I achieve this also with a single <table>?
http://jsfiddle.net/x2SQN/
Basically I cannot use javascript or not in-line css.

No. Within a table the columns remain consistent from top to bottom.
You can play around with the colspans of each cell but that's about it.
e.g. if you wanted you could do this.
<table>
<tr>
<td width="20%">20%</td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>
<tr>
<td width="50%" colspan="2">50%</td>
<td width="50%">50%</td>
</tr>
</table>
But you will be limited to using a combination of fixed px sizes OR % sizes as you can't do 50% - 100px for example.

Usually, We transform block elements to the table model to achieve a 'Table like' display, and now, as a solution to your problem: I found myself doing just the opposite.
the main idea is to transform your table, to a block model design, where we can take control of the width of every element.
the main gain of my solution, is that you can use CSS function (like calc) to give responsive width to column [like calc(100% - 100px)].
but the main downsize of my solution is the scenario when you have different cells height in the same row.
luckily that can be easily fixed with faux columns techniques. (I used one-true-layout)
so, after all that been said, lets take a look at the solution: (some of it is written in the CSS section, with regular CSS selectors and not inline as you requested, because it was easier for me. but you can copy-past everything to the right place and make it all-inline)
Working Fiddle Tested on: Chrome, IE10, FF
HTML (I've add the <tbody> so you can apply the inline-CSS styling)
<table>
<tbody>
<tr>
<td style="background-color:red; width: 100px;">100px</td>
<td style="background-color:yellow; width: calc(100% - 100px);">100% - 100px<br/>another line to demonstrate <i>faux column</i></td>
</tr>
<tr>
<td style="background-color:azure; width:50%;">50%</td>
<td style="background-color:pink; width:50%;">50%</td>
</tr>
</tbody>
</table>
CSS (all of that styling can be placed inline)
*
{
margin: 0;
padding: 0;
}
table, tbody, tr
{
display: block;
}
tr
{
overflow: hidden; /*Faux column*/
}
td
{
float: left;
padding-bottom: 99999px; /*Faux column*/
margin-bottom: -99999px; /*Faux column*/
}

You can do this using fake colspan values. Treat them as percentages to keep it simple.
<table border="0" cellspacing="6" width="400">
<tr>
<td colspan="30" style="background-color:red;" />
<td colspan="70" style="background-color:yellow;"/>
</tr>
<tr>
<td colspan="70" style="background-color:black;" />
<td colspan="30" style="background-color:pink;" />
</tr>
</table>

Related

Inbox Table Like Gmail - Fixed Row Height

I'm writing an angular email app and have used bootstrap tables in my mail template.
The body of the message is large and I would like to limit this to be just a single line, something similar to how gmail does it. Right now, my cell auto sizes which increases the size of the overall row. I used a couple of angular filters to limit the characters but I don't think that's all that Gmail is doing. There is some sort of an overflow hidden applied to the table row and also the height of each row is consistent.
How do I tweak my table css so that the row does not auto size when the cell data is a lot?
My HTML Code : http://pastebin.com/13jd9EfqI'm using the latest version of bootstrap css.
I know you'd want overflow: hidden and white-space: nowrap styles. If you want you can also add the text-overlow: ellipsis style for a nice effect. You can use table-layout: fixed to ignore the size of the contents of the cells and only look at the heading sizes, otherwise automatic column sizing can take into account the full width of the string (fiddle):
table.special { table-layout: fixed }
table.special th { width: 20% }
table.special th.content { width: 40% }
table.special td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
On your <tr> tags you should add style="width:[desired width]" so they don't resize, example:
<table class="table table-responsive table-striped table-hover">
<thead>
<tr>
<th style="width: 100px">MessageID</th>
<th style="width: 100px">Sender</th>
<th style="width: 100px">Content</th>
<th style="width: 100px">Date</th>
</tr>
</thead>
<tbody>
<tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
<td>ID</td>
<td>Sender</td>
<td>Content</td>
<td>Date</td>
</tr>
<tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
<td>ID</td>
<td>Sender</td>
<td>Content</td>
<td>Date</td>
</tr>
</tbody>
</table>
You can change the text of the <td> tags and it won't resize. You might want to add a padding to the left on your <td> tags so they are more 'inline' with the <tr> tag's text. DEMO

Absolute Div top position changed while zoom ( Ctrl + ) in chrome browser

I have problem with absolute positioning DIV over the table element. I have a DIV that’s set the position absolute and set the top position to display the exact place. Now what happened in chrome browser while zooming (ctrl +) the DIV position has been changed at zoom level 125, 150, 175 ... etc. But Zoom level 100,200, 300… (Multiple of 100) it’s displayed the same position. The problem was other than the multiple of 100 zoom level the DIV position changed. How can I fix this issue ?
I have created the sample page in jsfiddle - demo . please run the page in chrome browser and zoom the browser ( ctrl + ) the red color DIV position will be change, this is the issue. I really hope someone find a solution for this.
HTML :
<div class="container">
<table width="700px" class="custom">
<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>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<div>
<div class="apptest"> </div></div>
CSS :
table
{
border-collapse:collapse;
}
.custom tr td
{
height:20px;
border:1px solid;
background-color:White;
}
.container {
position: relative;
}
.apptest
{
height:70px;
width:400px;
position:absolute;
top:185px;
left:0px;
background-color:Red;
}
Link : http://jsfiddle.net/mJcsb/5/
Use a container with a style like this;
.Container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
I'm not going to debate whether tables are a poor choice or not these times. But an absolute positioning here is a pretty bad idea.
I don't know what you have to do and what is your aim, but you could have a different (and probably better) solution using divs; in that case, a div containing your "red" div would just.. contain it, heh!
If you want to go anyway with absolute positioning and tables, be aware that this is a dirty solution and could break anytime. In that case, I'd suggest you to go with percentage-based absolute positioning, so that the box flows with the zoom (that is, by the way, difficult to predict and normalize in every browser).
i.e.
.apptest
{
height:70px;
width:400px;
position:absolute;
top:61.2%;
left:0px;
background-color:Red;
}
A fork of you fiddle with percentage for absolute positioning (POOR SOLUTION WARNING HERE): http://jsfiddle.net/U4TGd/
Keep in mind that, again, this is a bad solution and mixing percentages and pixels in often a bad idea. If you have time or possibility, convert your table-based design and use divs instead of tabs.
Its not the div position which was changing, the one which our eye relates the div position was changing(in this case the table border of each cell).
I found out this with some testing,
use this css to know that the absolute position div is in exact position.
.custom tr td {
height:20px;
border:0px solid;
}
.container {
position: relative;
height:185px;
background:#0F6;
}
.apptest {
height:70px;
width:400px;
position:fixed;
top:185px;
left:0px;
background-color:Red;
}
So you have no problem with absolute positioning DIV, but maybe chrome rendering the table cells differently.

Responsive table alignment of columns

In responsive table design to refer I got this link jsfiddle.net/n4rUG/27/
This gives me below output:
Now I want to align title to left and its value to right
means it need to look aligned properly
How to do this?
The text-align: right doesn't work for your tds because it's overridden by the Bootstrap style with higher specifity. The quickest solution is just to add !important. Also, I'd suggest to make the labels floating to left (see modified fiddle):
td {
...
text-align: right !important;
overflow: hidden; /* for containg floats */
}
td:before {
...
float:left;
}
Your JSFiddle is different then the image in your post.
Refering to your image, you could make it like this, using colspan to set your colums width:
<table>
<colgroup>
<col width="100px" />
<col width="200px" />
</colgroup>
<tr>
<td>title</td>
<td>value</td>
</tr>
<tr>
<td>title</td>
<td>value</td>
</tr>
...
</table>
As for your JSFiddle, you have 5 <th>'s and 6 <td>'s. Which is possible, however, one of the <th> should cover two <td>'s, you can make that by using this:
<th colspan="2">Title</th>

fixed column height and width

I am having a table as follows:
<table>
<tr style ="height: 10px;" >
<td style="width: 200px, height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td> <td style="width: 200px , height : "10px;"> </td>
</tr>
</table>
The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change and even if the extra texts are not shown it`s fine.
I also want the height of the rows and columns to be of 3 lines of text and fixed in height.
First off, the code was incorrect. Here's your code corrected, try does it work what you wanted it to:
<table>
<tr style="height: 10px;" >
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
<td style="width: 200px; height:10px;"></td>
</tr>
</table>
Second, the way you're styling is very old-school and hard on you, try creating a CSS class which you can then apply to every element, no need to repeat the rules. In fact, if this will be the only table on your page, you can put something like this inside head:
<style type="text/css">
td {
width: 200px;
height:10px;
}
</style>
That will apply your rules to all tags on page, so you don't have to explicitly style each and every one.
Or you can do:
<style type="text/css">
.exampleclass {
width: 200px;
height:10px;
}
</style>
<table>
<tr style="height: 10px;" >
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
<td class="exampleclass"></td>
</tr>
</table>
That way you control your styling from one place, and are also able to apply it to other elements as you see fit.
If there's anything else, ask away.
EDIT: And for fulfilling your requirement of widths being fixed at cost of extra content not showing, apply both answers of Guzzie and QQping. Although if you're ok with varying height, you don't have to set overflow:hidden;
You should set the table's style to fixed like this and add the total width of the table
<table style='table-layout:fixed' width='300px'>
Firefox may not like to see table cells with overflowing long texts cause of fixed column-widths, to better display this you should set the following TD style in your css or on your current page
<style>
td {overflow:hidden;}
</style>
Simply add max-width with to your table cell.

How to set width of all elements in a table column with CSS

I have a table based layout, with one main two-column table, for left and right sides of a form. Each column contains an inner, two-column table, with a label and and input column, and each field on its own row.
Could I use CSS to set the width of both the input columns?
E.g.
<table id="frameTable">
<tr>
<td id="leftFieldList">
<table class="formColumn">
<tr>
<td>Surname</td>
<td><asp:TextBox.....></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox.....></td>
</tr>
....
....
<table>
</td>
</table>
In the table with class "formColumn", I want to set the the width of the second <td>, with the server controls. I would prefer to do this without assigning a class to every second <td> in my field lists.
The best solution around: use col tags!
<style> .col2 { width: 200px; } </style>
...
<table class="formColumn">
<colgroup>
<col></col>
<col class="col2"></col>
</colgroup>
<tbody>
<tr>...
</tbody>
</table>
Another IE6-unfriendly solution is
.formColumn td:last-child { width: 200px; }
If you're not stuck on CSS, you could use col groups
<table class="formColumn">
<colgroup>
<col />
<col width="200px" />
</colgroup>
<tr>
<td>Surname</td>
<td><asp:textbox..../></td>
</tr>
</table>
Usually, you could do:
table.formColumn tr td:last-child { width: 200px; }
but IE7 does not recognize last-child, so you might have to go with
table.formColumn tr td+td { width: 200px; }
IE6 does not recognize the + selector, according to quirksmode.org.
If you're planning on supporting IE6, I don't have a solution for you,
with your current markup.
That aside, some argue that you should not use tables to design the layout
of your website. That second table (formColumn) could've been replaced with
something like this:
<fieldset><label ...>Surname</label><YourTextInput /></fieldset>
If you want to set them to the same width it's easy:
table.formColumn td {
width: 150px;
}
If you want them to be different widths, it's a bit more problematic but not hugely so. Easiest option is just to assign a class to the td elements in the first row:
<table id="frameTable">
<tr>
<td id="leftFieldList">
<table class="formColumn">
<tr>
<td class="left">Surname</td>
<td class="right"><asp:TextBox.....></td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox.....></td>
</tr>
....
....
<table>
</td>
</table>
then:
table.formColumn td.left {
width: 150px;
}
table.formColumn td.right {
width: 300px;
}
Since the rest of the column will take those widths.
You could also use the + selector, but it's not supported in IE6:
table.formColumn td {
width: 150px;
}
table.formColumn td + td {
width: 300px;
}

Resources