I have a table with contents inside of it. I would like to be able to resize the column to 0 pixels so it appears 'gone'. The problem is that since there are contents inside the header and cells, it will only resize down to the size of the content.
I simply want it to work like this: if I set header width to 10px, it should become 10px wide, regardless of what's inside the header or the columns.
I did a workaround by wrapping cell contents into a container, which is positioned absolute:
<table>
<tr>
<th style="width:0px">
<div class="cell-wrapper">Some super long content</div>
</th>
<th>
<div class="cell-wrapper">More content, could be an image</div>
</th>
</tr>
</table>
.cell-wrapper
{
position: absolute;
}
But there are multiple issues with this approach. Is there a way I can do this without the absolute positioning/container workaround? Thanks!
You could try something like this..
.cell-wrapper {
border: 1px solid black;
}
<table>
<tr>
<th style="display: table-column;">
<div class="cell-wrapper">Some super long content</div>
</th>
<th>
<div class="cell-wrapper">Another cell with long text</div>
</th>
</tr>
</table>
Related
I have a table within a webpage I'm building, where either the left or right columns (but not both) will have some fairly-long text (a handful of words). The table has two columns - the first column is left-aligned, and the second column is right-aligned. Here's a simplified version of my table:
<table>
<tr>
<td>Some rather long text</td>
<td class=right-align>Short text</td>
</tr>
<tr>
<td>Text</td>
<td class=right-align>Some very long piece of text</td>
</tr>
</table>
It also has a small bit of CSS that goes with it:
.right-align {
text-align: right;
}
table {
width: 100%;
}
At a reasonable width, it looks fine:
Unfortunately, if I shrink the window, the text wraps:
Is there a way to have the text proceed through the "column separator", and allow that border to be at a different place for each row? There would be room for each row to take up only one line if the "column separator" could be different for each row. I am not using any libraries, just CSS + HTML.
I'm looking for it to do something like this (drawing made in MS Paint)
No, not with classic html tables. You will have to use grid or flexbox to achieve your desired effect.
use two tables
use flex box
use a div
If you need to use html <table> syntax, create one table for each row of data, your CSS will work.
Alternatively use e.g. <div> tags with CSS flexbox layout applying flex: auto to the col class, to distribute the available space.
Empty space distribution is handled differently by either approach. Check their behavior in the snippet below to see how the empty space distribution is handled when resizing the available document width (browser window).
Obviously text will start wrapping, once the width of a cell/div is fully occupied.
I've added colored borders/background and removed the table's cellpadding and cellspacing to better illustrate the behavior of the 2 examples.
.right-align {
text-align: right;
}
table {
width: 100%;
}
td {
border: 1px solid red;
}
.wrap {
width: 100%;
background-color: gold;
margin-top: 10px;
}
.row {
display: flex;
}
.col {
border: 1px solid blue;
flex: auto;
}
.col:last-of-type{
text-align: right;
}
<table cellpadding="0" cellspacing="0">
<tr>
<td>Some rather long text</td>
<td class=right-align>Short text</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Text</td>
<td class=right-align>Some very long piece of text</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0">
<tr>
<td>Some even more rather long text</td>
<td class=right-align>txt</td>
</tr>
</table>
<div class="wrap">
<div class="row">
<div class="col">
Some rather long text
</div>
<div class="col">
Short text
</div>
</div>
<div class="row">
<div class="col">
Text
</div>
<div class="col">
Some very long piece of text
</div>
</div>
<div class="row">
<div class="col">
Some even more rather long text
</div>
<div class="col">
txt
</div>
</div>
</div>
I have a table with a format like this
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item">
<b>P</b>
</td>
<td className="grid-item">
<div>✔ 17/10/2019</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and when click a external button, it turns something like this:
<table>
<thead>
<th> </th>
<th>foo1</th>
<th>foo2</th>
</thead>
<tbody>
<tr>
<th>Text that makes the cell use two lines of height</th>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<b>P</b>
</div>
</td>
<td className="grid-item green_border">
<div className="clickeable-cpopup">
<div>✔ 17/10/2019</div>
</div>
</td>
</tr>
/* more tr s */
</tbody>
</table>
and the div "clickeable-cpopup" has a onClick function and it needs to fill all space of its td parent, height and width, otherwise i click the td instead of the div and nothing happens.
the "grid-item" has padding: 0 and i tried the solution of apply display: flex to the "grid-item", it works in filling the space but the table format gets messed up.
Also I tried with better results giving position: relative to the "grid-item" and absolute to both "clickeable-cpopup" and "content". The clickeable div use all space in the td but then the cell that contains the date doesnt adjust to its content (the width of the cell is smaller that the lengh of the date)
How could I achieve this? I would like to avoid make the td clickeable.
Fixing the cell size is not a good option, a column that only contains <b>P</b> should be smaller thant a column that contains both P and date, an P could become a date and vice versa and some headers of the first column may use 2 lines of height.
And of course neither width: auto nor 100% work since the "grid-item" doesn't have a fixed size
I have several div elements where inside every div there is a table between some paragraphs (p) using the following code:
<p style="display: inline-block;">
Something BEFORE the table
<table style="display: inline-block;">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
Something AFTER the table
</p>
which produces a nice content that looks something like this:
head
Something BEFORE the table Something AFTER the table
data
However on each div there are different content lengths BEFORE and AFTER the table making it look like this:
head
Something BEFORE the table Something AFTER the table
data
head
Short BEFORE the table Short AFTER the table
data
head
Something long BEFORE the table Something long AFTER the table
data
What I want is set some "margin" to every table so they are a set distance from the beginning of their parent element (p on this case) so it will hopefully look like this:
head
Something BEFORE the table Something AFTER the table
data
head
Short BEFORE the table Short AFTER the table
data
head
Something long BEFORE the table Something long AFTER the table
data
The BEFORE, table, and AFTER elements of the page must be handled like this as having each of these on their own div and displaying them side by side will mess with this page section styling and also will produce a similar problem but now oriented vertically (however if your solution requires to do this please do share... maybe I'll end up using it).
P.D: If your solution includes Bootstrap please use version 3.
P.D.2: I'm sorry about how messy the examples look I'm still getting used to this.
Wrap it in a table structure. This can be done with div's styled as tables. This way you can make it responsive.
! Do not ever again put other block level elements in a p element
See: Why is <table> not allowed inside <p>
Below is the HTML of what you need:
.table{
display: table;
widht: 100%;
}
.row {
display: table-row;
}
.cell{
display: table-cell;
padding: 0 7.5px;
}
<div class='table'>
<div class='row'>
<div class='cell'>
Something BEFORE the table
</div>
<div class='cell'>
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class='cell'>
Something AFTER the table
</div>
</div>
<div class='row'>
<div class='cell'>
Something LONGGGGGG BEFORE the table
</div>
<div class='cell'>
<table>
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
</div>
<div class='cell'>
Something AFTER the table
</div>
</div>
</div>
Here is a simple and easy solution:
.before-table {
min-width: 250px;
display: inline-block;
}
<p style="display: inline-block;">
<div class="before-table">Something BEFORE the table</div>
<table style="display: inline-block;">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>data</td>
</tr>
</tbody>
</table>
<span>Something AFTER the table</span>
</p>
To set an absolute position you can use position: absolute on the element you're trying to position. It will get positioned at coordinates (0,0) (top-left) of it's first non-static parent. (By default every element has a position set to static, until you explicitly set it to something else). So that means you also need to assign a position to the parent (p I'm your case) so that it overwrites the default. Something like position: relative on the parent should do the job.
After that you can use the "top, right, bottom, left" CSS properties respectively to set a custom position from the parent's top/right/bottom/left border.
p {
position: relative;
}
table {
position: absolute;
left: 150px; // or whatever distance works best
}
Something like this, or it's equivalent inline version should do.
I'm using twitter bootstrap for my CSS on a project I'm working on.
as you can see in the image I've added, the width of my th cell is larger than the actual text I've added in it (which my bootstrap css automatically truncates). I want the red lines to start at the same point my blue line does. But this is being blocked from doing so because of the size of my th cell.
the code for my table is included below:
<table class="table bg-light table-sm table-responsive" style="width: 100%">
<tbody style="width:100%">
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">10.1</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
<tr style="width:100%">
<th scope="row" style="width:5%">
<div class="text-truncate" style="width: 100%">UNKNOWN</div>
</th>
<td>
<div style="width: 95%">
//...
</div>
</td>
</tr>
</tbody>
</table>
When I change the widths in the div/th cells and all parent tags to a pixel value instead of a percentage, the table does what I want (reduce the th cells size so that the red bars can start where the blue bar starts, text inside the cell becomes truncated) but when it is percentage values, the th cells stay as wide as the largest text in the column (in this case where it says "UNKNOWN").
You have to understand that HTML table will occupy the space it needs to display all the content inside it (it won't truncate it). So, if the table content asks for 2000px the table will respect it. Therefor, your cell width presented in percents will respect the table width. The only way you can really control the table cell width is to change the table layout:
table-layout: fixed;
But please note, it won't behave as a table it used to be. More about fixed table layouts here.
I am making a table and although I did not add any padding, some of the th in table 1 (see fiddle) seem to have a small padding-top. How can I fix that?
http://jsfiddle.net/6a1usq1s/
<table id="table1">
<tr>
<th>
<div class="body-table">VersF)</div>
</th>
<th>
<div class="h2-table">Drse</div>
<div class="body-table subheading">son</div>
</th>
<th>
<div class="h2-table">sne</div>
<div class="body-table subheading">Sstz</div>
</th>
<th>
<div class="h2-table">Br</div>
<div class="body-table subheading">s</div>
</th>
<th>
<div class="h2-table">a</div>
<div class="body-table subheading">an</div>
</th>
<th>
<div class="h2-table">a</div>
<div class="body-table subheading">a</div>
</th>
</tr>
vertical-align:top;
was the solution :)
You can try to nullify paddings for tr or td to cancel use of the styles installed in the browser by default:
padding: 0;
Then you can set height for div or tr/td, and to use line-height property for regulation of provision of the text in a cell (if the text is located in one line). If height is equal to line-height the text will settle down vertically in the middle.
height: 20px;
line-height: 20px;
Experiment with this property.