I want make two buttons sit next to each other within the same cell. How can I go about that without having alot space in the cell. Only Enough space to have the buttons sit in comfortable space between each other.
I have used display: inline-block; as well as display:block and style='white-space: nowrap'. Have looked at similar questions and their answers don't work with my project.
<table>
<tr>
<th>Employee Name</th>
<th>Email Address</th>
<th>Action</th>
</tr>
<tr>
<td>Johnny Depp</td>
<td>hotdog69#gmail.com</td>
<td>
<button type="button">Add</button>
<button type="button">Edit</button>
</td>
</tr>
</table>
When one or two buttons are present within a cell, they create this super long horizontal cell. The buttons are also far apart from each other.
You can use "table-layout:fixed" property to make your table use fixed width and assign width to "th" as per your choice. It will help you to adjust space of your table layout easily.
For email id, use "word-break: break-all" property to break text instead of using "white-space: nowrap" property.
<table style="table-layout:fixed;text-align:left">
<tr>
<th width="115px">Employee Name</th>
<th width="105px">Email Address</th>
<th width="90px">Action</th>
</tr>
<tr>
<td>Johnny Depp</td>
<td style="word-break:break-all;">hotdog69#gmail.com</td>
<td>
<button type="button">Add</button>
<button type="button">Edit</button>
</td>
</tr>
</table>
Maybe you need to use the command "colspan". For example...
<tr>
<th>Name</th>
<th colspan="2">Address</th>
</tr>
Turns out a button's style was controlling all the buttons in my project. I should have given that button an id so it wouldn't control all the buttons in a general sense.
Try to add below styling on the button or the td tag,
display:contents
Related
<tr>
<td></td>
<td colspan="3">Susi Handayani Jl. Kebangsaan No.225 300.000</td>
</tr>
How to merge the two td to be inside one Td, but it's not sticking together, merged but I want the word to not stick together beside, make some space from the deleted td to be the same column as above
I tried align but it didn't Work, I've also tried dividing the tr and tried removing td for one paragraph and it still sticks with the second paragraph (td), what I'd expect is the td not to stick together but to align the text above the text that I've made
<h3>Tabel HTML</h3>
<table>
<caption>Tabel Simpanan Peserta</caption>
<thead>
<tr>
<th>No</th>
<th>Nama Peserta</th>
<th>Alamat</th>
<th>Simpanan</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>350.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1.</td>
<td>Andi Suryono</td>
<td>Jl. Kemerdekaan No.17</td>
<td>50.000</td>
</tr>
<tr>
<td>2.</td>
<td colspan="3">Susi Handayani
Jl. Kebangsaan No.225
300.000</td>
</tr>
<tr>
<td>3.</td>
<td>Roy Pratama</td>
<td>Jl. Merdeka No.32</td>
<td>1.000.000</td>
</tr>
</tr>
<tr>
<td>4.</td>
<td>Tia Suryani</td>
<td>Jl. Jelajah No.111</td>
<td>1.555.000</td>
</tr>
</tbody>
</table>
I'm trying to make the table fused but not sticking together, I'm planning to give the word some space and how do I make the space for each column
You're talking about styling, yet you posted no style tag or CSS whatsoever. Post the general CSS you have, to reproduce the problem, or at least a screenshot of what the problem is.
Generally, spacing in tables comes with padding. Try something like:
<style>
td {
padding: 5px 10px;
}
</style>
This will put 5px top and bottom and 10px from both sides of every cell in the table.
My issue is that my anchor exceed table cell on iphone 5 display.
I have this as a style for the cell white-space: nowrap;
For the anchor I just have a background color : background: #f88e1e;
Could you advice please ?
<table class="subscriptionTable">
<thead>
<tr>
<th class="feature"></th>
<th class="free">free</th>
<th class="middle">silver</th>
<th class="top">gold</th>
</tr>
</thead>
<tbody>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature">linktarget</td>
<td></td>
<td></td>
<td><span class="icon-tick"></span></td>
</tr>
<tr>
<td class="feature"></td>
<td>
</td>
<td></td>
<td>
<a class="someClass" href="somelink">Free trial</a>
</td>
</tr>
</tbody>
</table>
I've succeeded to let the text be on one line by adding white-space: nowrap
But now the anchor width exceed the cell width. The anchor must stay inside...
Whether display:table-cell (CSS) or actual HTML tables, you can't prevent the immediate contents of a table cell from wrapping. They will always expand to fit the content.
If you want to adjust the contents inside a display: table-cell, you'll need to wrap it in another container element and set a different display type (block/table etc).
I have a table that for various reasons needs to have display block set. My understanding of display block was all elements within the display block element would have their width set to the parent width. My understanding is flawed, can someone explain why the header elements do not fill the width of the table?
<div style="width:500px; background-color:grey">
<table style="display:block; color:white;">
<thead>
<tr style="background-color:orange">
<td>test</td>
<td>test2</td>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td
</tr>
</tbody>
</table>
</div>
jsfiddle
There isnt a answer to this question. I eventually just re-wrote the table and modified the plugin. Thank you to the people which tried helping.
In the below code, the table which is supposed to be below the div ends up colliding with it and showing up in the middle of it.
Any help is welcome.
Fiddle here
<div id="header" width="100%">
<center>
blabla
</center>
<table align="left" class="header">
<tbody>
<tr>
<th>Links</th>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
</tbody>
</table>
<table align="right" class="header">
<tbody>
<tr>
<th>contacts</th>
</tr>
<tr>
<td>this guy</td>
</tr>
<tr>
<td>that other guy</td>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<th>the table that shouldn't be here</th>
<th></th>
</tr>
</tbody>
</table>
You just need to "clear: both" when you don't want an element to be affected by other elements' float value (or align in this case).
Here is what is happening, your first table is attached to the left, your second to the right, and the third is trying to fit between the two.
You can tell the third table to find an empty line to start on by using style="clear: both"
Working fiddle here.
notice the:
style = "clear: both"
on the bottom table
A couple of things:
You're using <center>, which is deprecated, according to
W3C:
The element was introduced in HTML 3.2 - Block elements. It
has been deprecated since HTML 4 - 15.1.2 Alignment.
HTML5 classifies it as a non-conforming feature.
In the jsfiddle you linked, the table seems to be below the div, so
I'm not sure what the problem is. Can you clarify?
I have some problem using HTML tables.
Below I have a table structure.
<table>
<caption>Movie Details</caption>
<thead>
<tr>
<th axis="m" header="movie">Movie Name</th>
<th axis="g" header="genre"> Genre</th>
</tr>
</thead>
<!-- note: rows generates dynamically using loop -->
<tbody>
<tr>
<td axis="m">Aanjana Anjani</td>
<td axis="g">Romance</td>
</tr>
<tr>
<td axis="m">Bodyguard</td>
<td axis="g">Romance</td>
</tr>
<tr>
<td axis="m">Gajini</td>
<td axis="g">Action</td>
</tr>
<tr>
<td axis="m">Singham</td>
<td axis="g">Action</td>
</tr>
</tbody>
</table>
Currently this table is sorted by movie name, now
Is there any way that, if I swap the column in <thead> then <tbody>,
data is swapped automatically (means tbody looking to thead and then
display ) using only HTML?
means if I change the column order ( genre is first column now),
<th axis="g" header="genre"> Genre</th>
<th axis="m" header="movie">Movie Name</th>
then column of each row of <tbody> should be changed.
I think the axis and headers attributes may be helpful for this but not getting the exact.
Reference for axis in headers.
You can if you're willing to consider (just a little) CSS. In the example below, you "switch columns" simply by swapping the names of the CSS classes. (that is, change .right to .left, and .left to .right). You don't have to make any changes to the HTML in the table itself.
<style type="text/css">
.right {width:100px; float:right;}
.left {width:100px; float:left;}
</style>
<table>
<thead>
<tr>
<td width="250px">
<div class="right">LEFT</div>
<div class="left">RIGHT</div>
</td>
</tr>
</thead>
<tr>
<td width="250px">
<div class="right">L Data</div>
<div class="left">R Data</div>
</td>
</tr>
</table>
What do you mean by "if i change the column order"?
You can only change the HTML structure in real time using JavaScript.
If you want to change it without JavaScript you then have to reload the page with a server side language like PHP which will sort the table and write the HTML code differently.
Anyway you choose, swapping only the <thead> content or replacing it is not enough. You still have to replace/change the content of the <tbody> also to see the items sorted in the new way.