Ok, here's a graphic to explain what I'm talking about:
The first table would be what my html currently produces and the second table is what I'd like it to produce.
#animalTable{
display: table;
}
.animalRow{
display: table-row;
}
.animalCell{
display: table-cell;
width: 33%;
}
<div id="animalTable">
<div class="animalRow">
<div class="animalCell">Dog</div>
<div class="animalCell">Milton</div>
<div class="animalCell">1/2/1998</div>
</div>
...
</div>
What would be the best/easiest way to get my desired table? I know I could brute force it by creating sub-tables inside the main table but I was wondering if there was a better way?
Also, sorry if this is a dumb question.
I suggest using tables instead of div for this specific case. Here is why you should Use tables for what they are meant to and div's for what they are meant to.
What you are looking for is called Colspan and Rowspan, both are HTML td and th attributes.
Example:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
You can read further on w3schools.
Hope this helps.
Simple, add different class or id selectors and in the css, remove all borders and re-add the ones you want to keep. Example,
div{
border: none;
border-top: solid 1px black;
border-left: solid 1px black;
}
Correct me if I am misunderstanding. Otherwise, if you have any questions don't hesitate to ask!
Related
I have a simple table :
table {
border: 1px solid grey
}
th,
td {
padding: .5rem
}
th {
text-align: right
}
<table>
<tbody>
<tr>
<th scope="row">Feed in Braids</th>
<td>20 / two braids</td>
</tr>
<tr>
<th scope="row">Waves / Curls / Straightening</th>
<td>30</td>
</tr>
<tr>
<th scope="row">Hairstyle for special occasions</th>
<td>45-60</td>
</tr>
</tbody>
</table>
I would like to squeeze the data in one column, which would probably have to look something like this:
table {
border: 1px solid black;
padding: 1rem;
text-align: center;
}
th,
td {
padding: .5rem
}
<table class="table table-hover">
<tr>
<th>Feed in Braids</th>
</tr>
<tr>
<td>20 / two braids</td>
</tr>
<tr>
<th>Waves</th>
</tr>
<tr>
<td>25</td>
</tr>
<tr>
<th>Special</th>
</tr>
<tr>
<td>40 </td>
</tr>
</table>
I have doubts if the "squeezed" table would be a correct construct, in terms of possibly unclear scope of the headings.
Concerning accessibility, a table header (th) can only have either "row" or "column" as its scope, and this is always valid for the whole row or column. So in this way your "one-column table" doesn't really meet accessibility standards and isn't semantically correct.
But if you have everything in one column, you could as well use alternating headers (like h3, h4, h4, whatever) instead of th and paragraphs (or simply contents following the headers) instead of td. And once you are that far, a table itself wouldn't make that much sense – the wparent element might as well be a div...
You also might want to consider a definition list instead, maybe (depending on what your actual usecase looks like, or which function it should fulfill): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
Or you use nested tables, i.e. multiple tables consisting of one th and one td, nested either in the cells of a larger table (if that semantically makes sense at all) or simply inside a div or section element.
I have a table and what I want is to not make the space between the content as big. This is what the page looks like right now:
So this is some of the code for the table (I'm not posting it all because it's repetitive, all the tags are closed at the end too).
I have tried changing the padding and margin and it doesn't work. This is the CSS:
/*styling the table for the add ons*/
table,
tr,
td,
input {
margin: 30px;
padding: 10px;
margin-right: 20px;
margin-left: 45px;
line-height: 1.4em;
font-size: 17px;
}
.pushRight {
position: relative;
left: 10px;
bottom: 75px;
}
<table style="width:100%">
<tr>
<td><label><input type="checkbox" name="example" value="Value"><span><b>Voice over artist</b> €475</span>
<table>
<tr>
<td class="pushRight">If you require a voice artist for your video project<br>please select this option.</td>
</tr>
</table>
</td>
<td><label><input type="checkbox" name="example" value="Text"><span><b>Creative Concept</b> €1200</span>
<table>
<tr>
<td class="pushRight">We are bursting with ideas, so if you don't have one of<br>your own please select this option.</td>
</tr>
</table>
</td>
</div></tr>
<tr><div class="secondRow">
<td><label><input type="checkbox" name="example" value="Value"><span><b>Script</b> €850</span></label>
<table>
<tr>
<td class="pushRight">If you would like us to allocate our scriptwriter to your project<br>please select this option.</td>
</tr>
</table>
</td>
<td><label><input type="checkbox" name="example" value="Text"><span><b>Storyboarding</b> €875</span>
<table>
<tr>
<td class="pushRight">It is not essential to storyboard every video project, <br>however if you would like to include this process,<br>please select this option.</td>
</tr>
</table>
</td>
</div></tr>
First of all, you have some divs that don't do much in your html(div with class second row), when you use tables, the tr tags define the rows automatically, so you don't have to put a div to say that's my first row etc...
Using a lot of margin, and padding everywhere will make your table look ugly depending on which browser you're using, i tried to reorganize your code and just added this in your css :
td{
padding : 20px
}
table{
margin: 0 auto;
}
All you have to do now is to play with the padding to change the space as you want. you can also change the width of the table if you want a bigger table.
Here's a jsfiddle :
https://jsfiddle.net/rfroq680/2/
I had this recently, you need to use border-spacing in css.
Try this:
table{
border-collapse:separate;
border-spacing:0 6px;
}
You'll get 6px between rows with the above code.
This should help too: https://www.w3schools.com/cssref/pr_border-spacing.asp
I have a <table> of data where consecutive rows are conceptually related and need to stay together. I've group each pair of rows in a <tbody> tag. When it comes time to print the table, I want to make sure that page breaks only happen between <tbody> tags.
I've tried some variations of page-break-inside: avoid and page-break-after: auto, but can't seem to get it to work in Chrome 42 (see screenshot below)
However, it does seems to work as expected in Firefox 40 and IE 11 though. It looks like page-break-* might only apply to block level elements. Is there a good way to accomplish this in html/css?
Example code:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
Here's a JSFiddle that'll give you a bit of an idea of what I'm trying to accomplish.
Edit: I considering not using a table but didn't since (i) I want my columns to line up, and (ii) I really don't want to hard-code column widths to make sure they're all the same.
Try wrapping it all in a
make that specific a block element (http://learnlayout.com/inline-block.html)
then use page-break-*
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.
This question already has answers here:
how to make a whole row in a table clickable as a link?
(28 answers)
Closed 2 years ago.
I know it is possible to link an entire table cell with CSS.
.tableClass td a{
display: block;
}
Is there a way to apply a link to an entire table row?
I agree with Matti. Would be easy to do with some simple javascript. A quick jquery example would be something like this:
<tr>
<td>example</td>
<td>another cell</td>
<td>one more</td>
</tr>
and
$('tr').click( function() {
window.location = $(this).find('a').attr('href');
}).hover( function() {
$(this).toggleClass('hover');
});
then in your CSS
tr.hover {
cursor: pointer;
/* whatever other hover styles you want */
}
Use the ::before pseudo element. This way only you don't have to deal with Javascript or creating links for each cell. Using the following table structure
<table>
<tr>
<td>Cell</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</table>
all we have to do is create a block element spanning the entire width of the table using ::before on the desired link (.rowlink) in this case.
table {
position: relative;
}
.rowlink::before {
content: "";
display: block;
position: absolute;
left: 0;
width: 100%;
height: 1.5em; /* don't forget to set the height! */
}
demo
The ::before is highlighted in red in the demo so you can see what it's doing.
Unfortunately, no. Not with HTML and CSS. You need an a element to make a link, and you can't wrap an entire table row in one.
The closest you can get is linking every table cell. Personally I'd just link one cell and use JavaScript to make the rest clickable. It's good to have at least one cell that really looks like a link, underlined and all, for clarity anyways.
Here's a simple jQuery snippet to make all table rows with links clickable (it looks for the first link and "clicks" it)
$("table").on("click", "tr", function(e) {
if ($(e.target).is("a,input")) // anything else you don't want to trigger the click
return;
location.href = $(this).find("a").attr("href");
});
Example: http://xxjjnn.com/linktablerow.html
Link entire row:
<table>
<tr onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
<td> ...content... </td>
<td> ...content... </td>
...
</tr>
</table>
Iff you'd like to do highlight on mouseover for the entire row, then:
<table class="nogap">
<tr class="lovelyrow" onclick="location.href='SomeWherrrreOverTheWebsiiiite.html'">**
...
</tr>
</table>
with something like the following for css, which will remove the gap between the table cells and change the background on hover:
tr.lovelyrow{
background-color: hsl(0,0%,90%);
}
tr.lovelyrow:hover{
background-color: hsl(0,0%,40%);
cursor: pointer;
}
table.nogap{
border-collapse: collapse;
}
Iff you are using Rails 3.0.9 then you might find this example code useful:
Sea has many Fish, Fish has many Scales, here is snippet of app/view/fish/index.erb
<table>
<% #fishies.each do |fish| %>
<tr onclick="location.href='<%= sea_fish_scales_path(#sea, fish) %>'">
<td><%= fish.title %></td>
</tr>
<% end %>
</table>
with #fishies and #sea are defined in app/controllers/seas_controller.rb
Also it depends if you need to use a table element or not. You can imitate a table using CSS and make an A element the row
<div class="table" style="width:100%;">
<a href="#" class="tr">
<span class="td">
cell 1
</span>
<span class="td">
cell 2
</span>
</a>
</div>
css:
.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
I feel like the simplest solution is sans javascript and simply putting the link in each cell (provided you don't have massive gullies between your cells or really think border lines). Have your css:
.tableClass td a{
display: block;
}
and then add a link per cell:
<table class="tableClass">
<tr>
<td>Link name</td>
<td>Link description</td>
<td>Link somthing else</td>
</tr>
</table>
boring but clean.
To link the entire row, you need to define onclick function on your row, which is <tr>element and define a mouse hover in the CSS for tr element to make the mouse pointer to a typical click-hand in web:
In table:
<tr onclick="location.href='http://www.google.com'">
<td>blah</td>
<td>blah</td>
<td><strong>Text</strong></td>
</tr>
In related CSS:
tr:hover {
cursor: pointer;
}
I think this might be the simplest solution:
<tr onclick="location.href='http://www.mywebsite.com'" style="cursor: pointer">
<td>...</td>
<td>...</td>
</tr>
The cursor CSS property sets the type of cursor, if any, to show when
the mouse pointer is over an element.
The inline css defines that for that element the cursor will be formatted as a pointer, so you don't need the 'hover'.