I have a standard table in which the cells appear left-to-right in the same row, but I'd like to force the third cell to appear on a new line. Is there a CSS tweak that can do this?
<table><tr>
<td class="col-1">One</td>
<td class="col-2">Two</td>
<td class="col-3">Three</td>
<td class="col-4">Four</td>
</tr></table>
This displays as: One Two Three Four
Can I force the third column to display on a new row thus:
One Two
Three Four
Not exactly sure why you wouldn't just make it a new row, but I suppose if you had to use CSS, you could do something like this:
table tr td {
display: block;
width: 50%;
box-sizing: border-box;
float: left;
}
JSFiddle
You can make a new row, by wrapping around your td with a tr as below
<table>
<tr>
<td class="col-1">One</td>
<td class="col-2">Two</td>
</tr>
<tr>
<td class="col-3">Three</td>
<td class="col-4">Four</td>
</tr>
</table>
Hope this helps!
Related
I am using HTML and CSS to display sentences aligned with word-by-word IPA transcriptions:
<table>
<tr class="eng">
<td>This </td>
<td>is</td>
<td>an</td>
<td>example</td>
<td>sentence.</td>
</tr>
<tr class="ipa">
<td>ðɪs</td>
<td>ɪz</td>
<td>ən</td>
<td>ɪɡˈzæmpl̩</td>
<td>ˈsɛntəns</td>
</tr>
</table>
tr.eng {
font-weight: bold;
}
tr.ipa {
font-style: italic;
}
td {
white-space: nowrap;
text-align: center;
}
.eng td:first-child {
text-align: left;
}
.eng td:last-child {
text-align: right;
}
http://jsfiddle.net/2ab9pgmd/
If a sentence is too long for the screen, I would like both rows to wrap to a new line, so that it could look like following hard-coded example:
<table>
<tr class="eng">
<td>This </td>
<td>is</td>
<td>an</td>
<td>example</td>
</tr>
<tr class="ipa">
<td>ðɪs</td>
<td>ɪz</td>
<td>ən</td>
<td>ɪɡˈzæmpl̩</td>
</tr>
</table>
<table>
<tr class="eng">
<td>sentence.</td>
</tr>
<tr class="ipa">
<td>ˈsɛntəns</td>
</tr>
</table>
Is it possible to set up an HTML table to wrap multiple rows to new lines dynamically depending on the screen size, rather than manually defining the line lengths in advance?
I found a similar example of what I would like to do here, but this solution does not keep the columns aligned for tables with more than one row.
If possible, I would rather not use JavaScript so the text can be viewed as an eBook.
I prefer you go with the CSS Grid cause when you use table row for wrapping it wont get wrapped up and wont provide you the desired output . You can add wrapping rules but I don't think it will work.
I'm editing my forum for mobile devices. So, I'm using media queries to format the front page based on device width.
My issue is that all of the categories have this style, which puts the td elements all in a row.
<tr class="windowbg2">
<td class="icon windowbg">
</td>
<td class="info">
</td>
<td class="stats windowbg">
</td>
<td class="lastpost">
</td>
</tr>
I don't want to get into the PHP that creates the rows, and my attempts/searches so far haven't worked how I want.
I want have the icon td and the info td squished onto one row, and under it have the stats and lastpost tds. How would I separate this row into two using CSS alone?
HTML
<table>
<tr class="windowbg2">
<td class="icon_windowbg">
icon windowbg
</td>
<td class="info">
info
</td>
<td class="stats_windowbg">
stats windowbg
</td>
<td class="lastpost">
lastpost
</td>
</tr>
</table>
CSS
table ,td {
border: 1px solid #000;
}
table {
width: 100%;
}
td {
width: 49%;
float: left;
display: block;
}
The border on the table is just so you can see it. You can take that off.
DEMO
http://codepen.io/anon/pen/xbdjoW?editors=110
You'll want to use a grid framework like Twitter's bootstrap or Thoughtbots "Bourbon neat". These allow you to specify how large an area will be with a main container. Then how much an each element will take up in that container.
with bourbon neat you could use
tr {
display:block # you're probably better off using div's though
#include outer-container;
}
ele {
#include span-columns(6);
}
this would effectivily in a 12 column grid put the two side by side in a row if your elements were
<tr>
<td class="ele"></td>
<td class="ele"></td>
</tr>
you can use this logic to make the other ones span the full 12 columns in the next row.
of course this can all be done in regular css with max-widths and more. grids just have done alot of the work for you. bootstrap is even easier to use. i just prefer bourbons more hands-off approach.
I'm making a tabular layout and I really need:
2 columns, of variable width
columns have the same width
columns are no wider than necessary
I have found that "table-layout: fixed" can achieve this, if I set both columns to have "width: 50%". Here's an example:
CSS:
.mytable {
border-collapse: collapse;
table-layout: fixed;
}
.fifty {
width: 50%;
}
HTML:
<table class="mytable" border=1>
<tr>
<td class="fifty">hello</td>
<td class="fifty">x</td>
</tr>
<tr>
<td class="fifty">a</td>
<td class="fifty">longer</td>
</tr>
<tr>
<td class="fifty">reallyreallylong</td>
<td class="fifty">medium</td>
</tr>
</table>
This is exactly what I want, and I'm happy, except that everything goes out the window when this table appears within another table. In that case, all columns shrink to the minimum possible size (at least for my version of Chrome).
Here is a jsFiddle demonstrating my dilemma: http://jsfiddle.net/KTkZm/
Can anyone shed light on this, and hopefully find a way to get the inner table to render as it does outside of the table? Thanks!
Check below jsfiddle link. It's Working Fine.
http://jsfiddle.net/KTkZm/14/
I want to make my form to look neat and I want my cells to be different sizes depending on the information in the cell. How do I make a cell width different then the one above it?
OK now i also want to know how to make 1 cell tall and have a lot of small cells to the right of it.
Example:
<html>
<table border="1"><td width="50">some info</td><td width="50">some more info</td>
<tr>
<td width="250">Lots more text and information in this box then the first cell</td><td> other information</td>
I don't want the first cell in the first row to automatically resize to the length of the first cell in the second row.
Example:
|some info|some more info|
|Lots more text and information in this box then the first cell|other information|
or is there at least another way to lay this out that would look clean?
All column in table always have similar width (you can't change it), you can only add one more cell and span some amount of cells in second row.
<html>
<table border="1">
<tr>
<td width="50">some info</td>
<td width="50">some more info</td>
<td></td>
<td></td>
</tr>
<tr>
<td width="250" colspan="3">Lots more text and information in this box then the first cell</td>
<td> other information</td>
Try this -- use DIVs to simulate table rows and columns, and the CSS min-width property to create "cells" that can stretch as needed.
http://jsfiddle.net/HN4YS/1/
html:
<div class="row"><div class="col1">some info</div><div class="col2">some more info</div></div>
<div class="row"><div class="col1">Lots more text and information in this box then the first cell</div><div class="col2">other information</div></div>
css:
.col1, .col2 {
display: inline-block;
min-width: 150px;
border: 1px solid;
padding: 4px;
}
.row {
white-space: nowrap;
}
I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax