I need relative solution for setting odd cols width as 1X and even row 2X of odd rows.
I am using this CSS:
.colTest{
width:100%;
}
.colTest col:nth-child(2n+1){
width: 100px;
}
.colTest col:nth-child(2n){
width: 200px;
}
as in:
jsFiddle
How can I set relative value (i.e %) for table cols with different number of cols?
(means that table cols are variable between 2 and 10)
jsFiddle Demo
.colTest {width:100%}
.colTest col:nth-child(2n+1){
width: 1%;
}
.colTest col:nth-child(2n){
width: 2%;
}
Update:
Like cbroe said you'll get better result with td instead of cols, but the general idea of my solution is the same.
jsFiddle Demo
.colTest {width:100%}
.colTest td:nth-child(2n+1){
width: 1%;
}
.colTest td:nth-child(2n){
width: 2%;
}
Formatting table cells via cols should work in theory, but browsers don’t always respect that. Format the td instead, see http://jsfiddle.net/2Gkxc/3/
td:nth-child(2n+1){
width: 100px;
}
td:nth-child(2n){
width: 200px;
}
Related
I'm trying to make a 3 column responsive form with rows that can use merged cells like an html table.
The problem I'm running into is that because of the margin on each column using a width of 30/60/90% doesn't align up with the row above it.
I created an example here (see row 1 and row 3):
https://jsfiddle.net/5ktkxres/2/
.formBlock {
float:left;
margin: 5px;
min-width: 200px;
}
.oneFormBlock {
width: 30%;
}
.twoFormBlock {
width: 60%;
}
I know its a simple fix but I can't find the solution, thanks in advance.
Or try CSS calc:
.formBlock {
float:left;
margin: 5px;
min-width: 200px;
}
.oneFormBlock {
width: 30%;
}
.twoFormBlock {
width: calc(60% + 10px);
}
https://jsfiddle.net/5ktkxres/10/
Make sure to take into consideration the margin on each side of each input. If you have a threeFormBlock at 90%, you will need to add 20px due to right margin on input one, both margins on input two and left margin on input three.
The quickest fix I can see is to change the margin to 1% and then add that to the width of .twoformblock. Like this:
.formBlock {
margin: 5px 1%;
}
.twoFormBlock {
width: 62%;
}
I think the best way is to use Bootstrap for that. (I know it is a "lazy" solution).
I'm trying to create a grid with columns. The problem is that once a column is bigger than the other, the next column won't float to the left anymore. Is there anyway I can fix this?
The code for the column is simple:
.column { width: 320px; float: left; }
I want to avoid defining a height or use a float: right.
Thank you
Adding clear fix by using nth-child could be a solution.
.column:nth-child(3n+1) {
clear: both; /* on row 4,7,10,13,16... */
}
Demo: http://jsfiddle.net/0nxb6xnL/
It seems it is happening for different height. Can you make the height identical and try again?
Like
.column { width: 320px; height: 200px; float: left; }
This is my code: http://jsfiddle.net/3GPTy/4/
CSS:
.price {
display: inline-block;
width: 19%;
background-color: pink;
margin-right: 8%;
}
.last {
margin-right: 0%
}
.container {
width: 780px;
margin:0px auto;
}
* {
margin: 0px;
padding: 0px;
}
What I don't understand is, I have 4*19 + 3*8 which should equal 100% but still it doesn't fit on one line?
To elaborate further, here's a few ways of solving the problem:
Comment out the space
</div><!--
--><div>
Put the space in the tags
</div
><div>
Just shove it on one line
</div><div>
The last one especially, ideally you should be minifying your HTML - I do on-the-fly with PHP magic, and with that I can write readable HTML and not have spaces.
CSS
.price {
width: 19%;
background-color: pink;
margin-right: 8%;
float:left;
}
http://jsfiddle.net/3GPTy/10/
Its because of the how the browser treats fonts; between letters it puts a small sliver of whitespace to space the characters out correctly. Counterintuitively this idea is applied to all elements, so if you have two div's at 50% width they will not fit on the same line because the small white space added makes the total width greater than 100%.
To solve this add:
font-size: 0;
to the parent div. You can then set the desired font size in its children to remove the white spacing that would have otherwise been added
Here's more detail on the issue from this CSS Tricks article, as well as other soultions including floating the elements and using comments.
I have a table with two fixed columns, one on the left and one on the right.
At the moment it only works in one resolution. But when the resolution is changed, the column on the right gets very messed up.
This is the main class that controls the margins (to allow room for the fixed columns) along with the width:
#myTable > .wrapper {
overflow-x: scroll;
overflow-y: visible;
width: 83%;
margin-left: 126px;
margin-right: 45px;
}
I have tried going into the developer tools and changing the width value down as I resize the browser. So far, this is the only solution I have found. Although, this would requre tons of media queries which is not a preferable solution.
How could I possibly edit my css classes to make this responsive?
Here is a demo
Try limiting the width of the wrapper by using min-width and max-width:
#myTable > .wrapper {
overflow-x: scroll;
overflow-y: visible;
max-width: 83%;
min-width: 40%;
margin-left: 126px;
margin-right: 45px;
}
FIDDLE DEMO
I would like to create a table with fixed header height (f.ex. 20px) and other rows height should be defined by percentage of the container (f.ex. 12%).
Row number varies from 4 to 6 and that is the cause that my table behaves in a wrong way. Height of header changes depending on the number of rows, despite it being defined in the css (min-height, height and max-height to be sure).
Here's a sample CSS:
#container
{
height: 800px;
}
#t1
{
border-collapse: collapse;
table-layout: fixed;
//height: 100%;
border: 1px solid black;
}
#head_row
{
height: 20px;
max-height: 20px;
min-height: 20px;
}
tbody tr
{
height: 12%;
max-height: 12%;
min-height: 12%;
}
tbody td
{
border: 1px solid black;
height: 12%;
max-height: 12%;
min-height: 12%;
}
Here is a sample JSfiddle of what I'm trying to achieve, but without setting table height to 100% it doesn't work and I commented it out.
jsfiddle here.
What did I forget or what am I doing wrong? Is there any way to do it using only HTML and CSS?
EDIT:
I'm trying to make a small calendar (I didn't write it earlier) and I just looked up how google does this:
Google calendar
They have header as one table and every row as a div with a one-row table inside it...
Well, I believe that people at Google know what they're doing, but is there really no simplier way?
Define your table height as follows.
height: 100%.
Which will refer Container height as you have defined. (min-height :800px; for Container div is more conventional so that Container div can grow in case of more data).
height: 800px;
If you remove Container height the table will shrink back to minimum required height.