BACKGROUND:
I would like to have small labels in columns of a table.
I'm using some implemented parts of HTML5/CSS3 in my project, and this section specifically is for mobile devices. While both facts are not necessarily relevant, the bottom line is that I don't have to support Internet Explorer or even Firefox for that matter (just WebKit).
THE PROBLEM
With my current CSS approach, the vertical padding of the cell comes from the <span> element (set to display: block with top/bottom margins), which contains the "value" of the column. As a result there's no padding when the <span> is empty or missing (no value) and the label is not in place.
The "full" coulmns should give you the idea of where I want the labels to be, even if there's no value, and the <span> is not there.
I realize that I could use "non-breaking-space", but I would really like to avoid it.
I wonder if any of you have a fix / better way to do this? current code is below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ah</title>
<style>
body {
width: 320px;
}
/* TABLE */
table { width: 100%; border-collapse: collapse; font-family: arial; }
th, td { border: 1px solid #ccc; border-width: 0px 0px 1px 1px; }
th:last-child, td:last-child { border-right-width: 1px; }
tr:first-child th { border-top-width: 1px; background: #efefef; }
/* RELEVANT STUFF */
td {
padding: 3px;
}
td sup {
display: block;
}
td span {
display: block;
margin: 3px 0px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">something</th>
</tr>
<tr>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span>any content</span></td>
<td><sup>some label</sup><span></span></td><!-- No content, just a label -->
</tr>
</table>
</body>
</html>
As above, you can use:
td {
padding: 3px;
vertical-align:top;
}
If you wanted to retain the padding exactly, even on the invisible elements, you can force the hasLayout attribute on the empty span using:
td {
padding: 3px;
vertical-align:top;
}
td sup {
display: block;
}
td span {
display: inline-block;
margin: 3px 0px;
text-align: center;
width:100%;
}
The inline-block technique is discussed extensively at Drawing empty inline boxes in CSS?
Related
I'm trying to change the width property of <input> inside of
<td>
element.
I have tried simply this and more variants like max-width but nothing is changing. Input box width is still the same. It works just fine in classic html, css files but its bugged in asp.net for some reason. Thx for any tips.
<table>
<tr>
<td><input class="numericInput"/></td>
</tr>
</table>
td {
max-height: 30px;
max-width: 30px;
border: 1px solid;
text-align: center;
}
input {
width: 20px;
}
Did you forget to put it inside a style tag?
<style>
td {
max-height: 30px;
max-width: 30px;
border: 1px solid;
text-align: center;
}
input {
width: 20px;
}
</style>
Also you might want to consider the below option if you are using #RenderBody(), declare the below code
#RenderSection("Styles", required: false)
in your base layout and add the below code
#section styles{
<style>
/* your style here */
</style>
}
in your views
In my mobile theme I have been playing around with the CSS of my tables to make the information clearer and easier to understand for my users.
In column 1 I have a network logo, in column 2 I have text which I have formatted both as (display:table-cell) and given them a border of 1px.
The problem is I can't get them to vertically align exactly I have attached an image to show you exactly what I mean.
http://pasteboard.co/1vII00Yg.png
As its an image in column one when I first inserted it in there it was messed up so I did this in the CSS to try to align it to the adjacent text cells.
HTML
<td class="network-cell">
<center><img alt="EE" src="/wp-content/themes/wootique-child/images/network-logos/ee-logo.png" class="network-logo"></center>
</td>
CSS
.network-logo {
min-height: 30px;
min-width: 30px;
position: relative;
top: 5px !important;
}
.network-cell > center {
border-bottom: 1px solid gainsboro;
border-right: 1px solid gainsboro;
border-top: 1px solid gainsboro;
height: 39px;
position: relative;
top: 5px;
width: 100%;
}
The adjacent cells are formatted differently because they don't contain an image.
For example.
HTML
<td>
<p id="minutes" align="center">300</p>
</td>
CSS
#minutes, #texts, #data, #infinity {
background-color: ghostwhite;
border-color: gainsboro;
border-style: solid;
border-width: 1px;
color: black !important;
font-size: 13px;
font-weight: normal;
line-height: 3em;
padding-left: 1px;
padding-right: 1px;
width: 100%;
}
How can I make the column 1's border align exactly to the border of column 2,3 + 4?
I know I need to change these to classes also - to view the problem scroll to the bottom of the website and select view mobile version.
http://mobilereactor.co.uk/shop/mobile-phones/samsung-galaxy-j1-white-deals/
This question is way more complex than the question you highlighted it
to be a duplicate of, the rules are different and we are talking about
aligning objects formatted as table cells not table cells themselves!
Replace all the id= with class=, as id shouldn't be duplicated. Just remove the <tbody> structure there and replace with the following:
.row {font-family: 'Open Sans', 'Segoe UI', sans-serif; font-size: 10pt;}
.row > div {display: inline-block; vertical-align: middle; height: 40px; background: #f5f5f5; border: 1px solid #ccc; line-height: 40px; padding: 0 10px;}
.row .network-cell {background: #fff; padding: 0;}
.row img {display: inline-block; line-height: 1; vertical-align: middle;}
<div class="row">
<div class="network-cell">
<img class="network-logo" src="http://mobilereactor.co.uk//wp-content/themes/wootique-child/images/network-logos/three-logo.png" alt="Three" />
</div>
<div class="minutes">100</div>
<div class="infinity">unltd*</div>
<div class="data">500MB</div>
</div>
Preview
Try border-collapse: collapse on each offending element. I believe that would be <center> and <img>. border-spacing: 0 may be of use as well. Keep in mind that your metro stylesheet reset the border-collapse: separate, so either place the styles in a <style> block with !important, or use inline, or better yet, assign classes.
With minimal effort:
.network-cell > center {
...
...
top: 6px;
...
...
}
But use table for alignment isn't so good, in this case better div with display: inline-block, and the tag center is deprecated.
I Decided to remove the table for now and just use DIVS. (UPDATE)
This is a continuing personal program I'm trying out. I am learning as I go with html and css. I was wondering why no matter what I try to do to create space between each row in the table it doesn't change. I tried border-spacing... border-collapse... padding yet nothing happens.
The table is on the left hand side of the page.
CSS:
tr.spaceUnder > td
{
margin-bottom: 5px;
display: block
}
table {
border-spacing: 10px;
border-collapse: separate;
}
td {
padding: 20px;
}
/* Formating for left sidebar of information */
#sidebar {
"background-color: #eee;
height: 200px;
width:350px;
float:left;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
border-radius: 5px;
}
Html code
<div id ="sidebar">
<table style = "width:350px; height: auto;">
<tr class = "spaceUnder">
<td>
<div><b> Things to take into account: </b></div>
<div>
<p>
When creating a website, don't forget about structuring.
If you can't get the objects to stop moving then your logic
must be wrong.
</p>
</div>
</td>
</tr>
<tr class = "spaceUnder">
<div><b> Things to take into account: </b></div>
<div>
<p>
When creating a website, don't forget about structuring.
If you can't get the objects to stop moving then your logic
must be wrong.
</p>
</div>
</td>
</tr>
</table>
</div> <!-- end sidebar -->
FYI-The middle container of text should be under the right ones. -This will be my next question because I've been trying to fix that for hours too.
here is the answer try this css below
tr.spaceUnder > td
{
margin-bottom: 5px;
display: block
}
table {
border-style: solid;
border-spacing: 10px;
border-collapse: separate;
margin-top: 120px;
}
td {
padding: 20px;
}
/* Formating for left sidebar of information */
#sidebar {
"background-color: #eee;
height: 200px;
width:350px;
float:left;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
border-radius: 5px;
}
LIVE DEMO
you just have to add border-style and margin-top to separate the two rows
hope this sweets your need
This is my layout:
<div class="divContainer">
<div class="item">
<div class="itemHeader"></div>
<div class="itemBody"><div>
<div class="itemFlag"></div>
</div>
....
</div>
And the CSS:
.divContainer{
display:table;
border-spacing:0 5px; //bottom spacing
width:100%;
}
.item{
display:table-row;
height:45px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.itemHeader, .itemBody, .itemFlag{
display:table-cell;
}
.itemHeader{
width:100px;
}
.itemBody{
width:150px;
}
.itemFlag{
width:20px;
}
The round borders don't appear on the item elements.
If I put them separately in itemHeader and itemFlag they appear.
But I'd really like to clear some code and put them in the item
Also can't get the radius to work on the divContainer class. I want a rounded container which contains rounded rows.
What is the problem? Maybe another part of CSS is messing it up, but I don't thing that is the case.
I'm afraid this there is no way to apply border radius on table rows. However, the workaround is pretty simple: just apply the background color and the border radius to the cells.
If you remove the background color from the table rows, and you can add this:
.item > div {
background-color: #ccc;
}
.item > div:first-child {
border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
}
.item > div:last-child {
border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
It will work even if you change your class names.
You can see it in action here:
http://jsfiddle.net/jaSs8/1/
Maybe the problem is in divContainer class. Try to change the display attribute to table-row.
You also can fix this issue by setting float:left; on the table element. It doesn't effect the behavior of the table flexibility and works like a charm.
table {
float: left;
display: table;
width: 100%;
border-collapse: collapse;
}
tr {
display: table-row;
width: 100%;
padding: 0;
}
td {
font-weight: bold;
background: #fff;
display: table-cell;
border-radius: 10px;
}
I think best solution for this case is to create wrapper for table tag and apply all border styles to it.
<div class="tableWrapper">
<table>{tableContent}</table>
</div>
<style>
.tableWrapper {
border-radius:10px;
}
</style>
I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?
Note: I added "_"s because my non-breaking spaces were getting lost.
Sample Page
Sample image
(source: c3o.com)
Content:
<style type="text/css">
div.box, table.box
{
padding: 10px 1000px 10px 10px;
}
div.box-header, td.box-header
{
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body, td.box-body
{
padding: 6px;
border: solid 1px #BBBBBB ;
border-top: none;
}
</style>
<div class="box">
<div class="box-header">please_help_make_these_divs_stop_overlapping</div>
<div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>
<table class="box" width="100%" cellpadding="0" cellspacing="0">
<tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
<tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>
There is no easy way to do this that is crossbrowser friendly that I know of.
At least in firefox you can create an simulated table by setting divs with
display:table;
display:table-row;
display:table-cell;
So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.
I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;
If you really don't want to use a table you can do this:
div.box div {
overflow: hidden;
zoom: 1; /* trigger haslayout for ie */
}
Next time this kind of problem comes up go to giveupandusetables.com.
One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.
You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.
For other ideas, check out this SO question.
Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.
The following should do what you want:
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>
<div class='box'>
<h3>please help make these divs stop overlapping</h3>
<p>please help make these divs stop overlapping</p>
</div>
Thinking about markup and style separately is the path to CSS Zen Mastery :o)
This works (actually holds together better than tables in ie7 too)
div.box{
float:left;
width:auto;
margin: 10px 1000px 10px 10px;
}
div.box-header{
float:left;
width:100%;
border: solid 1px #BBBBBB ;
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
}
div.box-body{
clear:left;
float:left;
width:100%;
padding: 4px;
border: solid 1px #BBBBBB ;
border-top: none;
}
NOTE: both boxes have to have same left and right padding or one juts out a bit.
Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:
<style type="text/css">
div.box, table.box
{
margin: 10px 1000px 10px 10px;
border: solid 1px #BBBBBB ;
padding: 0px;
}
div.box-header, td.box-header
{
font-size: larger;
padding: 4px;
background-color: #DDDDDD;
border-bottom: solid 1px #BBBBBB ;
}
.box-body, td.box-body
{
padding: 6px;
}
</style>
I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.
I had this problem also using Firefox 6.0.1, Opera 10.62, Safari 5.1, but not in IE 9, and the overflow:auto fixed it in all browsers. Nothing else did. I also tried overflow:contain, which also fixed the problem, but it appears that contain is not a valid value for overflow, so I am assuming that, since the value was not valid, auto was substituted.