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>
Related
Hi I'm having trouble adding inline styling to table components in React. Basically what I'm trying to do is so that the table header/cells are divided equally spacing so I'm adding width: '50%' styling to make this work. I added in the console and it works, but when I return to add it in my code, it doesn't.
I tried adding it to anything just to see if it work and it doesn't. Is there something I'm missing?
What it looks like:
What I want it to look like (after adding width styling to console):
JSX:
<table className="table table-striped">
<thead>
<tr styles={{width: '50%'}}>
<th styles={{width: '50%'}}>Hello</th>
<th styles={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody>
{(data.length == 0)&&
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
}
</tbody>
</table>
As mentioned in the comments
Change 'styles' to 'style' – cidicles
Usually plural styles is the convention people use when passing a variable to another component, while singular style is the keyword that jsx-html tags will receive to inline the css.
Other answers recommend adding styles to html tags directly in the css. While adding styles on html tags directly without using classes may work it is worth it to note that it may not scale well This will require more work on us to come back and maintain/update the original code.
You can use table-layout: fixed; width: 100% on the table to force equal column widths:
table {
width: 100%;
table-layout: fixed;
}
table tr th {
text-align: left;
background: gray;
color: white;
}
<table className="table table-striped">
<thead>
<tr style={{width: '50%'}}>
<th style={{width: '50%'}}>Hello</th>
<th style={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
</tbody>
</table>
Your width: 50% isn't working most likely because your parent .table doesn't have a width set. You can try adding width: 100% to the table and then your 50% might work.
EDIT
As other users have mentioned, change styles to style as well.
I have three entities in a row, currently I use table to display them:
<table>
<tbody>
<tr>
<td id='td1'>some text</td>
<td id='td2' style='width:600px;'>some text</td>
<td id='td3'>some text</td>
</tr>
</tbody>
</table>
What I need is to resize left and right cells simultaneously when browser resizes. I wonder if it is possible without JS.
I have even tried CSS resize which apparently does not work in IE, played with widths of the cells, but still without any success. I am totally a newbie in CSS.
Is it even possible? Thanks in advance.
Can't verify since I'm on a mobile but have you tried....
<table>
<colgroup>
<col class="first" />
<col />
<col class="last" />
</colgroup>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Then use the col.first and col.last classes to style them with css.
W3C: http://www.w3.org/TR/html-markup/col.html
Oh, and, remove all the css from your html. Having css inline will make the document completely unmaintainable through css files. And remove the IDs also from td:s and always use " to quote html attribute values.
You can also try to add:
table {
table-layout: fixed;
}
To prevent the browser from calculating the initial width of each cell according to their contents and give them all initially an equal width. (height will still expand according to content.) Then override certain columns with css.
try this css
table{
width:100%;
}
it works.
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>
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.
See this fiddle:
http://jsfiddle.net/uqJHf/
I have set the first column to show up with a red background.
However, the odd/even styling is overriding it. Even with added !important;
Is there any way I can get this fixed? (without having to add classes to the
tr.row_odd td {
background:#efefef;
}
tr.row_even td {
background:green;
}
.col1 { background:red !important; }
<table>
<col class="col1"></col>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
Firstly, lets deal with the markup. I believe that the <col> should be self-closing as it cannot contain any text or child elements and also it should be wrapped in a <colgroup>. You may even need additional <col> tags for each column (so 4 columns means 4 <col>'s).
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tr class="row_odd"><td>test</td><td>test</td></tr>
<tr class="row_even"><td>test</td><td>test</td></tr>
</table>
Now, having had a little play about with the CSS, it seems it's down to how CSS is applied to columns and <tr>'s. If you remove the styles pertaining to the <tr>'s you will see that the style is applied correctly.
So from this i have concluded that the styles are applied in a layered approach, probably because of the columns being a kind of meta detail of tables. An easy way to imagine this is that the <tr> tags are layered on top of the column, and because you've defined a background-color for the <tr> the column styling does not show through - due to the colour being opaque. If you set the <tr>'s background-color to an RGBA value you will see that the columns colour "shines through".
See the modification of your fiddle, for demonstration: http://jsfiddle.net/uqJHf/4/
Hope that helps, it certainly helped me because i've learnt something new here myself during my investigation.
EDIT: seems that IE9 doesn't agree with what i said, it doesn't seem to apply the RGBA value to the <tr> if the <col> has a background-color set. Works in firefox 7 though...
td:first-child
{
background:red !important;
}
The Class from HTML <col> does not get inherited by <td>. You need to adh´just the HTML. Give class col1 to first <td> in table row
http://jsfiddle.net/uqJHf/6/
--
<table>
<colgroup>
<col class="col1" />
<col />
</colgroup>
<tbody>
<tr class="row_odd">
<td class="col1">test</td>
<td>test</td>
</tr>
<tr class="row_even">
<td class="col1">test</td>
<td>test</td>
</tr>
</tbody>
</table>