I'm rendering a table, and dynamically adding a font awesome icon into the td, appending as a sibling to my select/input element.
For some reason, I can't get these two elements to be on the same line within the td.
I've tried nowrap, inline, inline-block, spans, etc.
This is rendered by a django formset, also.
Here's some code for context but its pretty generic. This isn't super original...but I'm not accustomed to working with tables so hopefully it's just something silly that I don't know:
<table>
<thead></thead>
<tbody>
<tr>
<td>
<div class='form-group'>
<div>
<select class='form-control'></select>
<i class='fa fa-arrow-down'></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
Related
I am trying to use HTML+CSS to create a two column layout to display two parallel forms. I would like the input fields of the forms to flow naturally down each column, except the two submit buttons, which look bad when they are not at the same height as each other.
I have tried a few different techniques, to no avail:
HTML tables work for creating the layout, but because elements are grouped logically by the row, it's not possible to have separate forms which encompass each column. (One of the columns has a file upload, so one big form is a no-go).
CSS tables are no good for similar reasons.
Using divs with "float: left" and "float:right" respectively works for the layout, and is very nice for grouping the two forms. However, the submit buttons (Which are the last elements of the divs) are at different heights. I would like to move the higher button down to the height of the lower button, so they are vertically aligned. However, I can't seem to figure out any way to do this, because they are two sibling divs, so they aren't "aware" of each other's heights.
Here is an example JSFiddle of the float-based implementation: http://jsfiddle.net/53nvqrfr/
<div style="float: left; width:50%">
<form>
<table>
<tr>
<td>
<input type=" text " />
</td>
</tr>
<tr>
<td>
<input type=" text " />
</td>
</tr>
<tr>
<td>
<button type="submit ">submit</button>
</td>
</tr>
</table>
</form>
</div>
<div style="float:right; width:50%">
<form>
<table>
<tr>
<td>
<input type=" text " />
</td>
</tr>
<tr>
<td>
<button type="submit ">submit</button>
</td>
</tr>
</table>
</form>
</div>
</div>
You can use bootstrap like this bootply and if you want full width just change class name from container to container-fluid.
You can add an empty row to the second table. It might be a hack, but it works.
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
So. I am creating a small site to test my capabilities.
In my site i have a page that in Firefox looks like this:
The additional files and additional actions buttons are inside a table. and each button is inside a <td> which are set to appear one under another with CSS using display:block; on the <td> element.
The problem is that when i open the page in IE9 or lower the td's are shown inline like this:
Because of this the responsiveness of the page is broken and resizing the viewport will move the page content below the left menu...
Here is the HTML of the tables:
<table class="buttons">
<tbody>
<tr>
<th colspan="2">Additional files:</th>
</tr>
<tr>
<td>
<a id="cv" href="">Curriculum Vitae</a>
</td>
<td>
<a id="cover" href="">Cover Letter</a>
</td>
</tr>
</tbody>
</table>
<table class="buttons">
<tbody>
<tr>
<th colspan="3">Additional actions:</th>
</tr>
<tr>
<td>
<a class="approve" href="">Denie</a>
<span style="display: none;">31</span>
</td>
<td>
Reply
</td>
<td>
Delete
</td>
</tr>
</tbody>
</table>
And this is the CSS:
.buttons {
float: left;
margin: 20px auto 0;
width: 50%;
}
.buttons td {
display: block;
width: 100%;
}
Can anyone suggest me a solution?
Thank you in advance!
You need to set table-layout: fixed; to your table and if still not working add a div inside td and manage the css which might work.
The real answer here is that you shouldn't be using <table> tags for this. What you have there is not a table, and so <table> is not semantically correct.
It's even worse because you're then overriding the default table layout by using display:block, which moves us even further away from wanting to use a <table>.
By using tables like this, and forcing the browser to restructure it with CSS, you're making it quite confusing for the browser. Particularly with the colspan attributes and then three columns of buttons, when you actually want them all in one column. Its easy to see why you'd get inconsistent behaviour with this, especially with older browsers.
So the solution here is to swap your <table> layout for a set of <div> elements. This will be semantically correct, and it will be easier to get it styled consistently. And you'll need less markup as well.
If you really want to carry on using tables for this layout, then you need to re-style all the elements -- display:block on the tr elements doesn't affect the display property of the table, tbody and tr elements, and these would also need to changed. But really, I would avoid that. Just use divs; it'll make things much cleaner.
Have a look at this fiddle Here for the CSS and HTML view.
The code is:
<body>
<div class="header-bar" id="header-bar">
<div class="title-bar" id="title-bar">
<table id="header-table" class="header-table" width="100%">
<tr>
<td>
<div class="site-title" id="site-title">Site Title</div>
</td>
</tr>
<tr>
<td>
<div class="site-tagline" id="site-tagline">Site Tagline</div>
</td>
</tr>
</table>
</div>
<div class="header-login-bar" id="header-login-bar">
<div class="header-login-form" id="header-login-form">
<table>
<tr>
<th>Name</th>
<td><input type="text" name="user-email"/></td>
</tr>
<tr>
<th>Password</th>
<td><input type="password" name="user-pass"/></td>
</tr>
</table>
</div>
<div class="header-logged-in" id="header-logged-in">
Welcome {$user}.
Dashboard
Logout
</div>
</div>
</div>
<div id="content-bar" class="content-bar">
This is the content part
</div>
</body>
The div with id header-bar must contain all of the elements drawn in this segment, but I cannot understand why, this segment refuses to behave. I am new to design, using more of graphical tools like Dreamweaver with code and design views to make these things, even there the content gets placed all wrong.
And in the browser, the div with id header-bar does not show any text at all. The div with id header-bar reports a height of 0px in Chrome's Inspect Element.
Add overflow:auto to your header-bar div. When the child elements of any element are floated, they're removed from the normal flow of the document which is why your header-bar div reports a height of zero. Adding overflow:auto to the parent div (header-bar) restores the expected behavior.
jsFiddle example
Is a div inside a table allowed or not according to W3C?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
</head>
<body>
<table>
<tr>
<td>
<div>content</div>
</td>
</tr>
</table>
</body>
</html>
This document was successfully checked as XHTML 1.0 Transitional!
You can't put a div directly inside a table, like this:
<!-- INVALID -->
<table>
<div>
Hello World
</div>
</table>
Putting a div inside a td or th element is fine, however:
<!-- VALID -->
<table>
<tr>
<td>
<div>
Hello World
</div>
</td>
</tr>
</table>
You can put div tags inside a td tag, but not directly inside a table or tr tag.
Examples:
This works:
<table>
<tr>
<td>
<div>This will work.</div>
</td>
</tr>
<table>
This does not work:
<table>
<tr>
<div> this does not work. </div>
</tr>
</table>
Nor does this work:
<table>
<div> this does not work. </div>
</table>
While you can, as others have noted here, put a DIV inside a TD (not as a direct child of TABLE), I strongly advise against using a DIV as a child of a TD. Unless, of course, you're a fan of headaches.
There is little to be gained and a whole lot to be lost, as there are many cross-browser discrepancies regarding how widths, margins, borders, etc., are handled when you combine the two. I can't tell you how many times I've had to clean up that kind of markup for clients because they were having trouble getting their HTML to display correctly in this or that browser.
Then again, if you're not fussy about how things look, disregard this advice.
It is allowed as TD can contain inline and block lements.
Here you can find it in the reference: http://xhtml.com/en/xhtml/reference/td/#td-contains