Here is my current situation: https://jsfiddle.net/rhercb/a4b2L95n/
Code:
.house_info_table {
width: 100%;
}
.house_info_table td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<table class="house_info_table">
<tr>
<td class="">TEST DU:</td>
<td class="">xxxxxx</td>
</tr>
<tr>
<td>TEST DU:</td>
<td>xxxxxx</td>
</tr>
<tr>
<td>Awailable thing here:</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td>TEST DU:</td>
<td>xxxxx</td>
</tr>
<tr>
<td>TEST DU:</td>
<td>xxxxxxxxx</td>
</tr>
</table>
I can only get both of these columns to shrink, but i need my 1st one to stay like that and not to bounce text in other row, and my 2nd one to show ellipsis when i shrink the page.
You can use the nth-child pseudoselector:
.house_info_table td {
max-width: 0;
overflow: hidden;
white-space: nowrap;
}
.house_info_table td:nth-child(2) {
text-overflow: ellipsis;
}
Read more here
I've used the min-width together with width. Is this what you want?
.house_info_table {
width: 100%;
}
.house_info_table td {
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.first-part {
min-width: 140px;
width: 150px;
}
<table class="house_info_table">
<tr>
<td class="first-part">TEST DU:</td>
<td class="">xxxxxx</td>
</tr>
<tr>
<td class="first-part">TEST DU:</td>
<td>xxxxxx</td>
</tr>
<tr>
<td class="first-part">Awailable thing here:</td>
<td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td>
</tr>
<tr>
<td class="first-part">TEST DU:</td>
<td>xxxxx</td>
</tr>
<tr>
<td class="first-part">TEST DU:</td>
<td>xxxxxxxxx</td>
</tr>
</table>
Related
Hi I want to display only few text in a html column and remaining to expand only if it is expanded by the user.
All in a single line how do I do it.(as shown in below screenshot)
Below is my code
<table style="border-style: solid;
white-space: pre;
overflow: hidden;
word-wrap: break-word
text-overflow: ellipsis;
border-color: 000708; background-color: 000708;" border="3">
<tbody>
<tr bgcolor="#18C1C1">
<td style="text-align: center; width: 107.588px;"><strong> Tree</strong></td>
<td style="text-align: center; width: 84.275px;"><strong> ID</strong></td>
<td style="text-align: center; width: 81.975px;"><strong> S</strong></td>
<td style="text-align: center; width: 3899.98px;"><strong>Text</strong></td>
<td style="text-align: center; width: 158.688px;"><strong> Name</strong></td>
</tr>
<tr>
<td style="width: 107.588px;">113</td>
<td style="width: 84.275px;">113</td>
<td style="width: 81.975px;">0</td>
<td style="width: 3899.98px;">This s a test and this should not expand after a fixed length --?></td>
<td style="width:
158.688px;">Test</td>
</tr>
</tbody>
</table>
If you don't mind using jQuery then you can give jQuery Resizable a try. jQuery UI Resizeable will allow resizing the element by the user and the CSS will help to hide the text properties rather than moving to the next line.
I also added a unique ID property to the table, keep that in mind if you have multiple tables and act accordingly.
Note: Table headers are draggable here.
$("#myTable thead th").resizable({
handles: "e" //To specify where the drag handles will be placed on the resizable element.
});
table {
table-layout: fixed;
width: 100%;
white-space: nowrap;
overflow: hidden;
}
table th {
white-space: nowrap;
overflow: hidden;
}
table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<table id="myTable" style="border-style: solid;
overflow: hidden;
word-wrap: break-word
text-overflow: ellipsis;
border-color: 000708; background-color: 000708;" border="3">
<thead>
<tr bgcolor="#18C1C1">
<th ><strong> Tree</strong></th>
<th ><strong> ID</strong></th>
<th ><strong> S</strong></th>
<th ><strong>Text</strong></th>
<th ><strong> Name</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td >113</td>
<td >113</td>
<td >0</td>
<td >This s a test and this should not expand after a fixed length --?></td>
<td >Test</td>
</tr>
</tbody>
</table>
Check out text-overflow property
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
I have to make a table like
and I have this code so far:
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td[rowspan="2"] {
height: 100px;
}
td[colspan="2"] {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td colspan="2">b</td>
</tr>
<tr>
<td rowspan="2">c</td>
<td colspan="2" rowspan="2">
<table>
<tr>
<td colspan="2" rowspan="2">d</td>
</tr>
<tr></tr>
</table>
</td>
</tr>
<tr></tr>
</table>
</div>
The validator is giving me
and I don't know how to fix them.
I need no errors from the validator, as
it has to be acceptable by specification.
rowspans and colspans are only used if a cell should span 2 other cells horizontally or vertically, which isn't the case in your example. They are not there to define width or height.
So delete those and use classes instead to define the properties you want:
Apart from that, delete those empty tr elements you have in there - they make no sense without tds in them. ALso the nested table with only one cell in it is rather strange (you could just fill that cell with content), but maybe there's a reason for that which you didn't tell us.
table, td, tr {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
}
td.b {
height: 100px;
}
td.a {
width: 100px;
}
<div>
<table>
<tr>
<td>a</td>
<td class="a">b</td>
</tr>
<tr>
<td class="b">c</td>
<td class="a b" >
<table>
<tr>
<td class="a b">d</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
can anyone give me an idea of how to approach the attached grid/table layout using bootstrap4 flex/grid (must be responsive)?
It's like a table with sticky first row and sticky first column as navigation items.
I tried using w- & h- but it's not responsive without media query. Would like to know the best solution on bootstrap4.
Thanks a lot! :)
(Pardon my English...)
Freeze First Row & First Column
However, to get this behavior for both first row and first column, you need to separate the first row, first column, and first cell from the table, and then continuously set the position of these elements based on the scrolled position of the table body, upon a scroll event.
$(document).ready(function() {
$('tbody').scroll(function(e) {
$('thead').css("left", -$("tbody").scrollLeft());
$('thead th:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
$('tbody td:nth-child(1)').css("left", $("tbody").scrollLeft()-5);
});
});
body {
margin: 0;
}
th, td {
text-align: center;
background-color: white
}
table {
position: relative;
width: 400px;
overflow: hidden;
}
thead {
position: relative;
display: block;
width: 400px;
overflow: visible;
}
thead th {
min-width: 80px;
height: 40px;
}
thead th:nth-child(1) {
position: relative;
display: block;
height: 40px;
padding-top: 20px;
}
tbody {
position: relative;
display: block;
width: 400px;
height: 90px;
overflow: scroll;
}
tbody td {
min-width: 80px;
}
tbody tr td:nth-child(1) {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Tanggal</th>
<th>Judul Pekerjaan</th>
<th>Deskripsi</th>
<th>Level</th>
<th>Category</th>
<th>Severity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1 May 2017</td>
<td>Satu</td>
<td>Satu</td>
<td>5</td>
<td>Lorem</td>
<td>Ipsum</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>2</td>
<td>2 May 2017</td>
<td>Dua</td>
<td>Dua</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
<tr>
<td>3</td>
<td>3 May 2017</td>
<td>Tiga</td>
<td>Tiga</td>
</tr>
</tbody>
</table>
I have a code to display the content of table as scrollable. But i am not sure on how to do scroll only on body not with head. Currently it happening for whole table.
Please help me.
tbody {
display: block;
}
tbody {
height: 300px;
/* Just for the demo */
overflow-y: auto;
/* Trigger vertical scroll */
overflow-x: hidden;
/* Hide the horizontal scroll */
}
<table cellspacing="0" id="itemtable" align="center">
<tr>
<th> SLno</th>
<th>Item name</th>
<th>Item code</th>
</tr>
<tr>
<td>1</td>
<td>icecream</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>biscuits</td>
<td>200</td>
</tr>
</table>
First of all you need your thead of the table to be separate from the rest of your table by either applying position: relative; or absolute.
Apply display: block to your tbody so that you have a block level element which you can then apply height and overflow properties to have a desirable scrollable table.
Refer code:
table {
position: relative;
width: 700px;
background-color: #aaa;
overflow: hidden;
border-collapse: collapse;
}
/*thead*/
thead {
position: relative;
display: block;
/*seperates the header from the body allowing it to be positioned*/
width: 700px;
overflow: visible;
}
thead th {
background-color: #99a;
min-width: 120px;
height: 36px;
min-height: 36px;
border: 1px solid #222;
}
thead th:nth-child(1) {
/*first cell in the header*/
position: relative;
display: block;
background-color: #88b;
}
/*tbody*/
tbody {
display: block;
width: 700px;
height: 239px;
overflow-y: auto;
}
tbody td {
background-color: #bbc;
min-width: 120px;
border: 1px solid #222;
height: 36px;
min-height: 36px;
}
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>County</th>
<th>Age</th>
<th>Profession</th>
<th>Anual Income</th>
<th>Matital Status</th>
<th>Children</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>Macelsfield</td>
<td>Cheshire</td>
<td>52</td>
<td>Brewer</td>
<td>£47,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Jenny Jones</td>
<td>Threlkeld</td>
<td>Cumbria</td>
<td>34</td>
<td>Shepherdess</td>
<td>£28,000</td>
<td>Single</td>
<td>0</td>
</tr>
<tr>
<td>Peter Frampton</td>
<td>Avebury</td>
<td>Wiltshire</td>
<td>57</td>
<td>Musician</td>
<td>£124,000</td>
<td>Married</td>
<td>4</td>
</tr>
<tr>
<td>Simon King</td>
<td>Malvern</td>
<td>Worchestershire</td>
<td>48</td>
<td>Naturalist</td>
<td>£65,000</td>
<td>Married</td>
<td>2</td>
</tr>
<tr>
<td>Lucy Diamond</td>
<td>St Albans</td>
<td>Hertfordshire</td>
<td>67</td>
<td>Pharmasist</td>
<td>Retired</td>
<td>Married</td>
<td>3</td>
</tr>
<tr>
<td>Austin Stevenson</td>
<td>Edinburgh</td>
<td>Lothian</td>
<td>36</td>
<td>Vigilante</td>
<td>£86,000</td>
<td>Single</td>
<td>Unknown</td>
</tr>
<tr>
<td>Wilma Rubble</td>
<td>Bedford</td>
<td>Bedfordshire</td>
<td>43</td>
<td>Housewife</td>
<td>N/A</td>
<td>Married</td>
<td>1</td>
</tr>
<tr>
<td>Kat Dibble</td>
<td>Manhattan</td>
<td>New York</td>
<td>55</td>
<td>Policewoman</td>
<td>$36,000</td>
<td>Single</td>
<td>1</td>
</tr>
<tr>
<td>Henry Bolingbroke</td>
<td>Bolingbroke</td>
<td>Lincolnshire</td>
<td>45</td>
<td>Landowner</td>
<td>Lots</td>
<td>Married</td>
<td>6</td>
</tr>
<tr>
<td>Alan Brisingamen</td>
<td>Alderley</td>
<td>Cheshire</td>
<td>352</td>
<td>Arcanist</td>
<td>A pile of gems</td>
<td>Single</td>
<td>0</td>
</tr>
</tbody>
</table>
</body>
Hey I was wondering if you can have a HTML table and make certain columns have whitespace: nowrap and the other columns that have whitespace: normal?
Example:
<table>
<thead>
<tr>
<th>No wrap</th>
<th>Wrap</th>
</tr>
</thead>
<tbody>
<tr>
<td>Small text</td>
<td>Wrap this longgggg text</td>
</tr>
</tbody>
</table>
CSS white-space is normal by default, so all you need is to set it to nowrap for some of the columns. One way is to add a class to them, as:
<td class="my_nowrap">this won't wrap</td>
<style>
.my_nowrap {
white-space: nowrap;
}
</style>
Other way would be to use CSS3 nth-child selector and (without setting classes) target some of the columns, as:
<style>
td:nth-child(2),
td:nth-child(3) {
.my_nowrap {
white-space: nowrap;
}
</style>
The above would set 2nd and 3rd column to nowrap.
Yes this is possible. Take a look at the example below.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
tr.wrap {
width: 50px;
}
th.wrap, td.wrap {
background: red;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 10px;
}
<table style="width:100%">
<tr>
<th class='wrap'>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td class='wrap'>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>