Unable to keep the table column width fix with CSS colgroup - javascript

p {
width: 40px;
margin: 0;
padding: 0;
}
td {
padding: 0;
margin: 0;
}
<table style="width:100px;">
<colgroup>
<col style="width:20px;">
<col style="width:40px;">
<col style="width:40px;">
</colgroup>
<tr>
<th>ID</th>
<th>NAME</th>
<th>Email</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>
<p>johntheman#example.com dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
sadddddddddddddddddddddddddd
</p>
</td>
</tr>
</tbody>
</table>
I have simple table with fix width. I also have fix width for columns in it to do that I have used CSS colgroup.
Problem 1:
Width of my columns if I check in developer's tool is different than that of what I have given in colgroup.
What I have tried
While fixing it I have found that the width changes with the text in it if I increase the text td increases and vice versa.
Problem 2:
When I enter the text in td unless I don't break it on new line by hitting enter the width of td goes on increasing with text.
What I have tried
To tackle this problem I have wrap my text in a p tag with fix width and then put it in td but still no luck. What I see is width is getting applied to P tag but text is overflowing.
What I expect :
I would like to know that why text is not breaking itself on new line after the fixed width of td. Why text overflows out of P even after fix width? Why td has to increase even after fix width?
I don't know what I am missing to apply here.

for the table use css property
table-layout: fixed;
Then provide fixed with to your td columns.

The width of the <p> tag and <td> are fixed they are not increasing.
Until there is no space in your text content it will not wrap to next line. You have to use ellipsis which will put ... in place of overflowing text content. Use below css for your <p> tag.
p {
width: 40px;
margin: 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
}

Related

How can i increase the width of this <td>?

I want to increase the width of the marked td, i've tried increasing width on it but it doesn't do anything. I don't care if the content on the other cells get smaller even.
This table is inside a modal also.
Here's my code:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Título</th>
<th>Área</th>
<th>Turno</th>
<th>Horário</th>
<th>Status</th>
<th>Participantes</th>
<th>Terceiros</th>
<th>Quantidade na Área</th>
<th>% Participação</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr v-for="(event, index) in selectedEvents" :key="event.id">
<td v-if="!event.editing">{{ (event.theme) ? event.theme.title : '-' }}</td>
<td v-if="event.editing" style="width: 500px">
<v-select
:options="themes"
label="title"
:clearable="false"
v-model="event.newTheme"
></v-select>
</td>
<td>{{ (event.teams_shifts && event.teams_shifts.team.name) ? event.teams_shifts.team.name :
event.team.name ? event.team.name : '-' }}
</td>
. . .
</tr>
</tbody>
</table>
You can add a CSS class to the td element that you want to increase the width of:
<td v-if="event.editing" class="wide-cell">
...
</td>
An then add a CSS file containing the styles for the wide-cell class:
.wide-cell {
width: 500px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
The width property is set to 500px with the !important rule to ensure that the width takes precedence over any other styles that might be affecting the td element. The white-space, overflow, and text-overflow properties are used to ensure that the content inside the td element does not overflow and is truncated with an ellipsis (...) if necessary. Note: The width property may not take effect if the parent container, such as the table or the modal, has a fixed width or is set to automatically size based on its contents. You may need to adjust the styles of the parent container as well.

Show last table column on line hovering

In a centered table is the last column hidden.
On hovering over a specific line I want the table to show the last column of this single line.
This should be offering the ability to edit and delete (AJAX) the content/object of the line.
Here's a example:
https://jsfiddle.net/5x2wv160/1/
The problem is the changed size of the table so it is moving a little bit to the left.
My idea fixing this is to change the last column to
tr > td:last-child {
position: relative;
}
But what base element do I have to set the display-style too?
Does anyone have any better ideas?
Check this way of showing the last column on hover to <tr>
.action {
display: none;
}
tr:hover .action{
display: block;
}
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content1</td>
<td>Content2</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content3</td>
<td>Content4</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content5</td>
<td>Content6</td>
<td class="action">Edit</td>
</tr>
</tbody>
</table>
You can use visibility instead of dispay:none like this:
table {
margin: 0 auto;
}
tr > td:last-child {
visibility: hidden;
}
tr:hover > td:last-child {
visibility: visible;
}
You are on the right way. But how about only showing contents thus the hyperlink on hover. tr td a { display:none; } VS tr:hover td a{ display:block} so the content would not be moving left and right. Also setting standard widths for each table column would prevent that the columns are moving

How can I protect the cell borders when hiding the table cells contents dynamically using plain javascript?

I am creating a table in plain JavaScript, and filling it up using onClick listener event in two ways - either clicking on a external button, or clicking on one of the cells itself; and in both ways, calling a function to randomly assign values to some of the cells. I am not able to hide the contents of my table cells using either of the methods available- display: none, and visibility: hidden. But I am still able to do it using fontSize = 0., wherin another problem crops-up viz the cells borders are lost. Thus my problem is that I want to hide my table cells contents whilst rendering values in them withput affecting the table structure.
I have already tried conventional methods available viz.
1) td {display: none;}, and td {visibilty: hidden}
2) I have also tried inline CSS style method to hide the cell contents, but all these methods blank the table itself i.e. oblivate the cell borders themselves.
3) When I use:
document.getElementById('myelement').getElementsByTagName('td')[n[i]].style.fontSize = 0; I am able to hide the contents, but then cell borders are lost.
<body>
<div class="container-fluid">
<table id="myelement">
<tr>
<td> </td>
... .... ...
<td> </td>
</tr>
</table>
</div>
</body>
<script>
...
for(let i=0;i<mycount;i++){
td[n[i]].firstChild.nodeValue='X';
document.getElementById('myelement').getElementsByTagName('td')
[n[i]].style.fontSize = 0;
}
...
</script>
All the techniques available blank the table itself i.e. oblivate the cell borders themselves. The expected result is intact table structure when hiding the cells contents.
Something like this?
Cell with class="hidden" will appear to be empty but you can change background: #fff; to any other color you want
td.hidden {
position: relative;
}
td.hidden:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
z-index: 10;
}
<table border=1>
<tr>
<td class="hidden">asd</td>
<td>zxc</td>
<td>test</td>
</tr>
<tr>
<td>asd</td>
<td class="hidden">zxc</td>
<td>test</td>
</tr>
<tr>
<td>asd</td>
<td>zxc</td>
<td class="hidden">test</td>
</tr>
</table>

Inserting dynamic row into HTML table

I'm trying to insert dynamic rows in an HTML table. If I comment the line which is supposed to insert dynamic row in the html tag (.innerHTML), the format of the table is fine with the header row on top and the first body row just underneath.
As soon as I uncomment the dynamic row rendering, the dynamic row is created on top of the header row. I cannot find the reason of it. Have a look at the below jsfiddle test code.
html_out = "<tr><td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td></tr>";
document.getElementById("render").innerHTML = html_out;
#scrolltable { margin-top: 20px; height: 150px; overflow: auto; }
#scrolltable table { border-collapse: collapse; }
#scrolltable th div { position: absolute; margin-top: -20px; }
<div id="scrolltable">
<table>
<col width ="50px">
<col width ="60px">
<col width ="120px">
<col width ="100px">
<col width ="120px">
<tr>
<th><div></div></th>
<th><div>Rank</div></th>
<th><div>Squad Name</div></th>
<th><div>Skill Pts</div></th>
<th><div>Current War (vs)</div></th>
</tr>
<tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr>
<div id="render"></div>
</table>
</div>
Correct table formatting:
Row overlapping header:
https://jsfiddle.net/ShaiHul/0rzqvcbm/60/
Steps to Take for Valid HTML and Accurate DOM Manipulation
Remove .render it's incredibly invalid simply because the only child element <table>/<tbody> can have is <tr>.
You probably resorted to using an dive that way because when using .innerHTML the direct logical way ended up obliterating a portion of the table. .innerHTML overwrites whatever it targets unless you use += instead of = which makes .innerHTML append instead overwrite content.
document.querySelector('table').innerHTML += HTMLString
But there's a method that renders Strings to HTML like .innerHTML but inserts Strings instead overwrites content. Not only is it safer but it's far more accurate.
.insertAdjacentHTML( position, HTMLString )
The first parameter, position is one of four possible String, below is represents a target element to which we intend to place a HTMLString (the second parameter) into or around:
Position: "beforebegin" <table> "afterbegin" ...... "beforeend" </table> "afterend"
Demo
HTMLStr = "<tr><td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td></tr>";
document.querySelector("table").insertAdjacentHTML('beforeend', HTMLStr);
#scrolltable {
margin-top: 20px;
height: 150px;
overflow: auto;
}
#scrolltable table {
border-collapse: collapse;
}
#scrolltable th div {
position: absolute;
margin-top: -20px;
}
<div id="scrolltable"><table><col width="50px"><col width="60px"><col width="120px"><col width="100px"><col width="120px"><tr><th><div></div></th><th><div>Rank</div></th><th><div>Squad Name</div></th><th><div>Skill Pts</div></th><th><div>Current War (vs)</div></th></tr><tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr></table></div>
You're adding a div to a table, that messes up the layout. You should just insert the HTML into a tr instead of a div and it works fine:
html_out = "<td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td>";
document.getElementById("render").innerHTML = html_out;
#scrolltable { margin-top: 20px; height: 150px; overflow: auto; }
#scrolltable table { border-collapse: collapse; }
#scrolltable th div { position: absolute; margin-top: -20px; }
<div id="scrolltable">
<table>
<col width ="50px">
<col width ="60px">
<col width ="120px">
<col width ="100px">
<col width ="120px">
<tr>
<th><div></div></th>
<th><div>Rank</div></th>
<th><div>Squad Name</div></th>
<th><div>Skill Pts</div></th>
<th><div>Current War (vs)</div></th>
</tr>
<tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr>
<tr id="render"></tr>
</table>
</div>
If you don't want to rely on having an empty element in the html, you can just get the table and use appendChild() to add another table row to it, e.g.:
var html_out = "<td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td>";
var tr = document.createElement("tr");
tr.innerHTML = html_out;
document.getElementById("table").appendChild(tr);

table layout fixed - when th position is absolute

I have table inside a div,
<div class="divScroll">
<table class="table1">
<tr class="tableHeader">
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<td>Data5</td>
</tr>
.....
.....
</table>
</div>
My CSS,
.divScroll
{
height: 25px;
overflow-y: auto;
width: 100%
}
.table1
{
width: 100%;
table-layout: fixed;
}
.tableHeader
{
position: absolute;
}
In the above coed, I am trying to make table scrollable with fixed header. That means when user scroll top-> bottom table header should remain fixed only table data should be scrolled.
I can achieve, scrollable table but problem is th col width are not aligned with td col width Since i applied Position : absolute for 'th'.
How to make both th and td col width aligned properly?
It is a very common question, already answered in the past.
Here some local resources:
Table header to stay fixed at the top when user scrolls it out of view with jQuery
Table with fixed header and fixed column on pure css
And here another external:
Fixed Header Table

Categories