Issue
I want about 30 tables on a page in a grid like format but I am having trouble putting any spacing between all of them. This is what I have right now:
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
<table>
<tr>
<th><span class="prizestitle">Table</span></th>
</tr>
<tr>
<td><span class="prizesinfo">Info</span></td>
</tr>
<tr>
<td><span class="prizesdesc">Description</span></td>
</tr>
</table>
table {
border-collapse: collapse;
border: 1px solid gray;
width: 50%;
float: left;
}
th {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
}
td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
font-size: 30px;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}
Here is the jsfiddle: https://jsfiddle.net/ohLa00m7/1/
Something similar to how to boxes are layed out here (http://www.awwwards.com/blog/) is what I am looking for.
Thanks for any help!
Solution
Using <div>
instead of tables would work better.
My version of this code:
HTML
<div class="shell">
<div class="prizestitle">Table</div>
<div class="prizesinfo td">Info</div>
<div class="prizesdesc td">Description</div>
</div>
CSS
.td {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
}
.prizestitle {
padding: 8px;
text-align: left;
border-bottom: 1px solid #ddd;
background-color: #6666ff;
font-size: 30px;
font-weight: 200;
}
.prizesinfo {
font-size: 25px;
}
.prizesdesc {
font-size: 18px;
}
.shell {
border: 1px solid gray;
border-collapse: collapse;
width: calc(50% - 40px);
margin: 10px;
display: inline-block;
float: left;
}
Answered By - Sakaratte
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.