I have the following HTML:
<div class="wall" >
<table>
<tr>
<div class="tbr01"><th>Content</th></div>
<div class="tbr02"><th>User</th></div>
<div class="tbr03"><th>Published</th></div>
</tr>
</table>
</div>
How do i adjust the width of the th div.tbr01
This is what i've tried in my css file: but i am doing something wrong?
div.wall table tr div.tbr01 th {
width: 100px;
}
Regards,
Thijs
Your HTML is invalid.
You cannot have a <div> as a child of a <tr> or a parent of <th>.
Browsers will perform error recovery in various different ways and often give you a DOM that isn't like you expect (e.g. by moving all the div elements outside the table).
Get rid of the div elements and apply your styles directly to the table cells.
seems it doesn't like the div... apply the class to the th or use
div.wall table tr th {
width: 300px;
}
OR
<div class="wall" >
<table>
<tr>
<th class="tbr01">Content</th>
<th class="tbr02">User</th>
<th class="tbr03">Published</th>
</tr>
</table>
</div>
div.wall table tr th.tbr01 {
width: 300px;
}
Related
I am using jqxValidator to validate a group of radio buttons. When the red message (which is a label) appears under the row, it inherits the width of the first column, breaking the design:
I tried many things, finally changing the display of the label fixes the table layout, but the message get splitted in 2 lines.
Is there a way to extend the width of the label to use the whole table width?
Example: https://codepen.io/lhernand/pen/OEZbXb
HTML:
<table style="border:0; border-collapse:collapse; " width="100%">
<tbody>
<tr class="rowRequired jqx-validator-error-element" id="optionsID0EYE">
<td style="border:0; width:50%; "><input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span></td>
<td style="border:0; width:50%; "><input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span></td>
</tr><label class="jqx-validator-error-label" style="position: relative; left: 0px; width: 304.688px; top: 2px;">Please choose one option!</label>
</tbody>
</table>
Note: it should work in IE11
Working with this kind of fixed structure requires some mayor hacking,
since jquery validator inserts a label after a td on the table, the element behave like a td with no match on the same row.
Using the chrome dev tools option to copy the selector on the inspector, I can get the most specific selector posible for the html structure you have, so aplying a 200% size to this element, tricks the table to not missbehave
#tablePatientDetailsContainer > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > table > tbody > label{
width: 200% !important;
box-sizing: border-box;
}
Tested on Chrome, FF and Safari
My Working Code
https://codepen.io/Teobis/full/vrjZVR/
Hope this helps
You placed the id optionsID0EYE in the wrong place. jqxValidator will create a sibling for the element who has this id. You need to do something like so:
<tbody>
<tr class="rowRequired">
<div id="optionsID0EYE" style="display: flex; flex-wrap: wrap">
<div style="width: 50%">
<input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span>
</div>
<div style="width: 50%">
<input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span>
</div>
</div>
</tr>
</tbody>
I moved the id optionsID0EYE to a new div I made.
Working example: https://codepen.io/anon/pen/YvLZeB?editors=1000
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 am writing my first CSS lines. I want to align all rows of the same block together but I am not sure how to do this. This is what I am trying to do:
Using regular HTML I would have created a table with as many rows as days and 2 columns. However since CSS is about separating content from presentation I think this violates the principles of CSS. I am thinking that the needed code will have the form:
<div>
<div>days</div><div>hours</div>
</div>
but I am not sure how the CSS should look like. I don't even understand the CSS defines exactly where to load the different areas.
Thank you
Always use table for table structured data, so that it can be easily styled using css like the way you wanted.
Also Table will be easier to understand when one looks at the source!
What if the developer later wants to have a striped row or a hover over effect on a row or a column? so use table and leave all the styling part to be dealt in CSS.
here is a typical html and CSS for your need, view it in jsfiddle
HTML
<table id="schedule">
<tbody>
<tr>
<td>monday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>tuesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>wednesday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>thursday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>friday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>saturday</td>
<td>8am to 6pm</td>
</tr>
<tr>
<td>sunday</td>
<td>closed</td>
</tr>
</tbody>
</table>
CSS
#schedule td:first-of-type
{
text-transform: capitalize;
text-align: left;
padding-right: 10px;
}
#schedule td:last-of-type
{
text-align: center;
padding-left: 10px;
}
I have created a fiddle that should solve your problem.
Here is the link to the fiddle
Below is the HTML and CSS Code
HTML
<div id="outer">
<div class="push-left">Monday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Tuesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Wednesday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
<div class="push-left">Thursday</div>
<div class="push-right">8am to 6pm</div>
<div class="clearfix"></div>
</div>
CSS
#outer{
width:170px; //width of the container
}
.push-left{
float:left; //pushes the element to the left
}
.push-right{
float:right; //pushes the element to the right
}
.clearfix{
clear:both; //clears any applied floats
}
Hope this solves your problem!
Try
dayshours
Then CSS
.holder{
clear:both;
}
.test{
width:200px;
}
The holder will keep the lines separate
And the test will define 200px or what ever width you want to each field
Either that or use tables
I'm trying to make 2 separate tables to echo results of drinkers and their drinks from a bar.
The tables have alternating backgrounds using nth-child(odd), nth-child(even) which is working fine.. its just getting them to align through different browsers and getting rounded corners.
I've tried using nth-last-child(1)..etc but still no tidy solution.
Here's where I'm at so far..
http://giblets-grave.co.uk/index3.php
and this is what its ment to look like:
http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg
Take a look at my current css at /css/main2.css
I've not seen your code, but I mocked up a similar scenario.
HTML
<div id="main">
<div id="first">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
<div id="second">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
</div>
As you can see, the height of the second table is "dynamic", and it could be longer than the first table, doesnt matter.
The CSS
#main {
width:500px;
overflow:hidden;
}
#first, #second {
padding-bottom: 1000px;
margin-bottom: -1000px;
float: left;
}
#first {
float:left;
width:100px;
overflow:auto;
}
#second {
width:400px;
float:left;
}
Thus far, what you have is the #first parent to follow the height of the #second. Reference
Fiddle
So what now? The #first follows the height of the #second, but the #first_child does not follow the height of #first. However, HTML tables does not follow parents div's heights. Reference
Answer: Javascripts.
You first want to detect the height of the #second, and then auto adjust the height of the #first_child to follow the height of the #second.
var second_height = $("#second").height();
var table_height = second_height;
$("#first_child").height(table_height);
Solution
Hope this is what you're looking for.
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;
}