I have a table below with vertical headers. I'm trying to find a way to remove the extra space inside the table header and table data. Below is how I constructed my table.
<table>
<tr>
<th class="field">Item id number:</th>
<td class="column">XXX 1234 (Location)</td>
</tr>
<tr>
<th class="field">Values:</th>
<td class="column">100,000 - 150,000 CM</td>
</tr>
<tr>
<th class="field">Item status:</th>
<td class="column">Passed</td>
</tr>
</table>
Table image-
Preview link
I tried resetting the padding and margin for the table header and table row but I don't think that's really the solution to it.
The approach is combine width and nowrap like that:
.field {
text-align: start;
font-weight: 400;
width: 1%;
white-space: nowrap;
}
Happy coding.
Related
Is using the "hidden" attribute semantically correct when hiding the table cell because of the rowspan and colspan attribute of another table cell?
I could find only examples which entirely remove the table cells to make space for the cell(s) spanning multiple rows and cols (having the rowspan and colspan attributes).
Example:
<table>
<tr>
<td colspan="3" rowspan="2">#1</td>
</tr>
<tr></tr>
<tr>
<td>#7</td>
<td>#8</td>
<td>#9</td>
</tr>
</table>
But is it semantically valid to do something like this?
<table>
<tr>
<td colspan="3" rowspan="2">#1</td>
<td hidden></td>
<td hidden></td>
</tr>
<tr>
<td hidden></td>
<td hidden></td>
<td hidden></td>
</tr>
<tr>
<td>#7</td>
<td>#8</td>
<td>#9</td>
</tr>
</table>
Just to give a little context: I'm working on a rich text editor having a constraint that empty span elements are being added to empty block elements. Having a span element inside an empty table row would be considered invalid HTML (tr can only have td and th as child elements).
I've been researching a bit but couldn't find a definitive answer to my question.
It's incorrect, and you don't need to write these cells in the HTML at all. The correct HTML for your example is as follows.
Having an identical rowspan value over all cells of a row (like in your first cell which spans all columns) does not make sense – this isn't a grid system but just a table which will contain whatever content you put into it.
table {
border-collapse: collapse;
width: 300px;
}
td {
border: 1px solid #ddd;
vertical-align: top;
}
tr:first-child > td {
height: 2.8em;
}
<table>
<tr>
<td colspan="3">#1</td>
</tr>
<tr>
<td>#7</td>
<td>#8</td>
<td>#9</td>
</tr>
</table>
I am trying to process an XML file via XSLT to produce an HTML report. The report contains a table with 3 columns: Description, Date and Note. One row of this table may contain one description, but multiple dates and notes. The dates and notes for a single description form pairs, but sometimes either a date or a note is missing. I could have the following problems:
A note does not have a corresponding date, so the date-note pair representation is skewed (See Date 1.2 and Note 1.2 in the example). A desired representation would have an empty line followed by Date 1.2 on a different line.
A note spans multiple lines, but its corresponding date does not, so the following notes are not aligned with their dates.
Here is an example. I used <br/> elements for demonstration purposes.
<table>
<tr>
<td class="firstcolumn">Description</td>
<td>Date</td>
<td class="lastcolumn">Note</td>
</tr>
<tr>
<td class="firstcolumn">Description 1. Could span multiple lines.</td>
<td valign="top" align="right">Date 1.2</td>
<td valign="top" align="right" class="lastcolumn">Note without date 1.1<br/> Note 1.2</td>
</tr>
<tr>
<td class="firstcolumn">Description 2.</td>
<td valign="top" align="right">Date 2.1<br/> Date 2.2</td>
<td valign="top" align="right" class="lastcolumn">Some really long note<br/>spanning multiple lines 2.1<br/> Note 2.2</td>
</tr>
</table>
Here is a link to a fiddle: JSFiddle.
I tried to solve this with nested tables: for each row of the outer table, I created a nested table with 2 columns, each row of which contained a date-note pair (or an empty cell and a note). The dates and notes now align. However, the nested table column widths do not align across the rows of the outer table. I tried to solve this by setting all nested table widths using the styles
table { width:100%;table-layout:fixed;} /* for each nested table */
td {width:90px;} /* for the columns of nested tables */
The columns now align. However, sometimes the notes are cut off and not visible (using the overflow style I can make them appear outside the table border, but it looks ugly). Ideally, I would want to have column widths that adjust to the notes' lengths.
I think I made it!
What I did is:
I broke the 2nd and 3rd rows in two
to the first one I gave rowspan="2"
I created two classes: bt and bb
table {
border-collapse: collapse;
width: 75%;
}
td {
border-collapse: collapse;
border: 1px solid black;
padding: 0px;
margin: 0px;
font-family: Calibri;
}
td.firstcolumn {
width: 60%;
}
td.lastcolumn {
width: 25%;
}
.bt {
border-top: 0;
}
.bb {
border-bottom: 0;
}
<table>
<tr>
<td class="firstcolumn">Description</td>
<td>Date</td>
<td class="lastcolumn">Note</td>
</tr>
<tr>
<td rowspan="2" class="firstcolumn">Description 1. Could span multiple lines.</td>
<td class="bb" valign="top" align="right"></td>
<td class="bb" valign="top" align="right">Note without date 1.1</td>
</tr>
<tr>
<td class="bt" valign="top" align="right">Date 1.2</td>
<td class="bt" valign="top" align="right" class="lastcolumn"> Note 1.2</td>
</tr>
<tr>
<td rowspan="2" class="firstcolumn">Description 2.</td>
<td class="bb" valign="top" align="right">Date 2.1</td>
<td class="bb" valign="top" align="right" class="lastcolumn">Some really long note<br/>spanning multiple lines 2.1</td>
</tr>
<tr>
<td class="bt" valign="top" align="right"> Date 2.2</td>
<td class="bt" valign="top" align="right" class="lastcolumn">Note 2.2</td>
</tr>
</table>
Here's a fiddle
Assuming that you need to adjust width automatically based on contents try changing in example provided here
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_width
<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
border:1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="70%">January</td>
<td width="30%">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
<p>The width attribute is not supported in HTML5. Use CSS instead.</p>
</body>
</html>
Let's take 4 table columns - ID, Text, Date, Action. In my case table have always constant width - in example 960px.
How can I create such table as :
*-*------------------------------------*----------*----*
|1| Some text... |May 2011 |Edit|
*-*------------------------------------*----------*----*
|2| Another text... |April 2011|Edit|
*-*------------------------------------*----------*----*
As we can see, ID, Date and Action adjust their width to content, Text is as long as possible....
Is that possible to do without setting specific width of columns ? When ID = 123 or Date = November 2011, columns should automatically be wider...
Using a 100% width on the wide td and a fixed width for the table along with white-space:nowrap, this can be done:
Demo
HTML
<table>
<tr>
<td>1</td>
<td width="100%">Some text... </td>
<td>May 2011</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td width="100%">Another text... </td>
<td>April 2011</td>
<td>Edit</td>
</tr>
</table>
CSS
table
{
...
width:960px;
}
td
{
...
white-space:nowrap;
}
basically, it's just like this: http://jsfiddle.net/49W5A/ - you have to set the cell-width to something small (like 1px) to make them stay as small as possible.
but as you'll see, theres one problem with the date-fields doing a line-wrap. to prevent this, just add white-space: nowrap; for your text-field: http://jsfiddle.net/ZXu7U/
working example:
<style type="text/css">
.table{
width:500px;
border: 1px solid #ccc;
}
.table td{
border: 1px solid #ccc;
}
.id, .date, .action{
width:1px;
}
.date{
white-space: nowrap;
}
</style>
<table class="table">
<tr>
<td class="id">1</td>
<td class="text">Some Text...</td>
<td class="date">May 2011</td>
<td class="action">Edit</td>
</tr>
<tr>
<td class="id">2</td>
<td class="text">Another Text...</td>
<td class="date">April 2011</td>
<td class="action">Edit</td>
</tr>
</table>
My best advice to you is to not touch the widths of the table, the table automatically layouts in a way that does all cells best.
However, if you'd like to push through, I'd use width: 1px; on the cells that needs adjusting (one of each column is enough). Also use white-space: nowrap on all cells. that will make sure the lines don't break.
Try this:
.id, .date, .action is the table cells (td).
CSS:
.id, .date, .action {
width: 1em;
}
It worked for me.
The width:1em will not cut the text but force the width size to the minimum.
The best way that I've found for setting table column widths is to use a table head (which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:
HTML
<table>
<thead>
<tr>
<th width="5%"></th>
<th width="70%"></th>
<th width="15%"></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Some text...</td>
<td>May 2018</td>
<td>Edit</td>
</tr>
<tr>
<td>2</td>
<td>Another text...</td>
<td>April 2018</td>
<td>Edit</td>
</tr>
</tbody>
</table>
CSS
table {
width: 600px;
border-collapse: collapse;
}
td {
border: 1px solid #999999;
}
View Result
Alternatively, you can use colgroup as suggested here.
I have a HTML table consisting of 3 columns. It has a fixed width of 600px.
<table>
<tr>
<td>Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
I want the Qty and Actions columns to be as small as possible (keeping the content to one line) and the Name column to take up the rest of the available space. The size of the Qty and Actions column change depending on content/font size so fixed widths will not work in this case.
Is there a way of doing this in HTML/CSS? Or is this something I need to break out the Javascript for?
You can apply width="99%" on that column. For example:
<table>
<tr>
<td width="99%">Name</td>
<td>Qty</td>
<td>Actions</td>
</tr>
</table>
you can use max-width:99%; on the first column and give fixed sizes on the other columns (I used pixels sized columns).
<table style="width: 100%;">
<tr>
<td style="max-width: 99%">
Will max
</td>
<td style='width:110px;'>
fixed size here
</td>
</tr>
</table>
For every column you want to be the minimum width: (1) set the CSS width to zero and (2) use white-space: nowrap to prevent the text from wrapping onto multiple lines.
table {
width: 100%;
}
:where(th, td):not(.max) {
width: 0;
white-space: nowrap;
}
/* For demo purposes */
table, th, td {
border: 1px solid gray;
}
<table>
<tr>
<th class="max">Name</th>
<th>Qty</th>
<th>Actions</th>
</tr>
<tr>
<td class="max">Victoria Adelaide Mary Louisa</td>
<td>233,546,443</td>
<td>Abort Retry Fail</td>
</tr>
</table>
I have a table, with some rows and columns, here is the example of the second row
<tr>
<td valign="top" style="width: 150px;">
<h5>MyCity</h5>
</td>
<td valign="top" style="width: 360px;">
<h5 class="store_title">Store Title</h5>
<p>address</p>
</td>
<td class="storeDescriptionCell"><div>Description
</div>
</td>
</tr>
I added storeDescriptionCell in my css
td.storeDescriptionCell{
padding:20px;
}
I even tried using the div, but everytime I add margin or padding to cell or div, MyCity, Store Title goes down with the Description. I just want the description to lay lower.
You could use the following CSS to set all <td> cells to vertical align top and the store description to vertical align bottom:
table td {
vertical-align: top;
}
table td.storeDescriptionCell {
vertical-align: bottom;
}
This is how html tables work. If you want one cell to be lower than the rest in a row you might want to try using a rowspan.
Can you provide an image of what you want and what you get.
Looking at the content that you want in your table why not use a th for the headings of the columns.
<table>
<tr>
<th>My City</th>
<th>Store Name</th>
<th> </th>
</tr>
<tr>
<td>content</td>
<td>$content</td>
<td>$content</td>
</tr>
</table>