Please help, I want td was the same size everywhere. And that was a vertical scrolling.
I used height and this doesn't help.
I'm styled only th(his wight)
http://imageshack.us/f/402/feedbacktz.jpg/
<table class="table table-striped" id="feedback_table">
<thead>
<tr>
<th style="width: 25px">Anything</th>
<th style="width: 70px">Anything</th>
<th style="width: 80px">Anything</th>
<th style="white-space:nowrap; width: 125px">Anything</th>
<th style="width: 360px">Anything</th>
<th style="width: 114px">Anything</th>
</tr>
</thead>
<tbody>
if the reviews contain lots of text, the Text review is too broad (see attachment). Scrolling is required to see the edit button.
Set the table with.
<table class="table table-striped" id="feedback_table" width="774">
or
table.table { width: 774px; }
This might help in your case.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
i have modified the code according to your need for example below
<p>overflow:scroll</p><table>
<tr>
<td>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</td>
</tr>
</table>
//CSS
div.scroll {
background-color:#00FFFF;
width:100px; height:100px;
overflow:scroll;
}
hope this helps!
Related
How do I go about making the 'description' column responsive? As you can see the bootstrap description is pushing my site. I would like the description go for a specific width, and the text to go behind the 'language' and have just one horizontal scroll bar for all of the description column.
I'm using bootstrap btw so the code doesn't contain a css but maybe it helps you anyway :)
<div className="table-responsive-lg">
<table className="table table-hover text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Language</th>
<th scope="col">Date Created</th>
<th scope="col">File Size (kb)</th>
<th scope="col">Open Issues</th>
</tr>
</thead>
<tbody>{data.map(item => (
<tr key={item.id}>
<td><a href={item.html_url}>{item.name}</a></td>
<td>{item.description}</td>
<td>{item.language}</td>
<td>{item.created_at.slice(0,10)}</td>
<td>{item.size}</td>
<td>{item.open_issues}</td>
</tr>
))}</tbody>
</table>
</div>
You can define a class with some CSS as below:
.fixed-width {
width: 400px;
display: block;
overflow-x: auto;
}
then add class fixed-width to all <th> and <td> tags in your "description" column.
Use this CSS.
.table {border-collapse:collapse; table-layout:fixed; width:310px;}
.table td {width:100px; /*add as per your requirements*/ word-wrap:break-word;}
Using Child Pseudo Or Unique Id OR Class.
Set as per screen required. Using #media.
I modified the previous answer a bit and add the .fixed-width class only on the column containing the description
.fixed-width {
max-width: 400px;
display: block;
overflow-x: scroll;
}
<div className="table-responsive-lg">
<table className="table table-hover text-nowrap">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Language</th>
<th scope="col">Date Created</th>
<th scope="col">File Size (kb)</th>
<th scope="col">Open Issues</th>
</tr>
</thead>
<tbody>
<tr key="1">
<td>Google</td>
<td class="fixed-width">some looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong description here</td>
<td>English</td>
<td>19/01/2021</td>
<td>38</td>
<td>5</td>
</tr>
</tbody>
</table>
</div>
You can define your css Like this:
tbody tr td:nth-child(2) {
width: 245px;
overflow-x: scroll;
max-width: 245px;
}
i'm beginner who just started
i've tried to following video of creating forum using bootstrap 4 in youtube
but table-responsive doesn't work
i think my code is same as in video but browser not the same
my broswer
browser in youtube
here's my table. i hope someone help me..
thanks
<table class="table table-striped table-bordered table-responsive">
<thead class="thead-light">
<tr>
<th scope="col" class="forum-col">Forum</th>
<th scope="col">Topics</th>
<th scope="col">Posts</th>
<th scope="col" class="last-post-col">Last post</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3 class="h5">Forum name</h3>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</td>
<td>
<div>5</div>
</td>
<td>
<div>18</div>
</td>
<td>
<h4 class="h6">Post name</h4>
<div>by Author name</div>
<div>05 Apr 2017, 20:07</div>
</td>
</tr>
<tbody>
you should wrap the table in element and take the .table-responsive class out of tag and put that class in wrapping div element. .table-responsive class should include break point size for example .table-responsive-sm
<div class="table-responsive-sm">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>.</th>
Your first TD is not set to word wrap. You can add the following CSS declaration to your TD elements to resolve this issue:
word-break:break-all;
Since the td content length is so high. You need to break the words inorder to get responsive table
Look at this Fiddle JSFiddle
CSS:
td{
word-break:break-all;
}
I'd like to make to following table adapt its width to the cells, instead of its container:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The width of the container is narrower than the sum of the cell width. It is okay to show horizontal scroll bar here, but the table just can't be wider than its container. If I calculate the sum width for the colspan and the table, it can do the job, but what if the cells has non-px width, like "%" or "em"? Then static px calculation can't work.
Current effect is:
The expected effect would be the table's width exceeding the container div's width.
But setting width directly to the table also has problems: the width set for cells will be ignored. For example:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed; width: 900px;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The effect is:
Note the 2nd cell (should be 200px) is as narrow as the 1st and 3rd one.
Anybody could shed some light on this issue? Thanks in advance.
add css:
th{
min-width:50px; /*for instance*/
}
div{
overflow-x:scroll;
}
and remove style='table-layout: fixed; width: 1px;' from the table
Would positioning the table absolutely be acceptible?
<table border="1" style="position:absolute;">
This works such that the div no longer contains the table horizontally. But, of course, the div also no longer contains the table vertically. You could work around this by giving the div height manually, though.
Merijn's answer works, tweaked slightly, for the fixed-width cells case:
Instead of specifying a global th min-width, specify it per cell like so:
<th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>
At least this way, your individual width's are not ignored, giving you a table wider than the container, and with irregular width cells.
I am trying to span background image over 2 table rows but this does not seem to work.
Html:
<table id="branchTable">
<thead>
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</thead>
<tbody>
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tbody>
</table>
css:
#branch-logo {
background-image: url(/public/images/logo.png);
height:53px;
width:100px;
background-repeat: no-repeat;
background-position: left;
}
The image seems to be pushing the row down and not spanning accross.
UPDATE
<table id="branchTable">
<tr id="thead">
<th align="center">Tel.</th>
<th align="center">Fax</th>
<td rowspan="2" id="branch-logo"> d</td>
</tr>
<tr id="tbody">
<td align="center">${_branch?.tel}</td>
<td align="center">${_branch?.fax}</td>
</tr>
</table>
rowspan does not seem to work between tbody and thead. Using tr does the trick.
You forgot your <tr>s in your table. That's probably what causes it to misbehave.
And as Scott says, you use logo in your html and branch-logo in your css.
Edit: In addition, I'm not at all sure if all major browsers support rowspanning a cell over a thead and a tbody. That would take some testing.
I'm really bad with html/css, so I'm just wondering if I can get your help.
Here's a fiddle of this table fiddle. You can see that each of the td rows are the same width. However, I want, for example, to have the column on the left 200 px, and the column on the right 50 px.
What's the most efficient way to achieve that if I'm going to have a lot of rows?
<table id="theList">
<thead>
<tr>
<th >Item</th>
<th >Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
</tbody>
</table>
CSS
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
Keep in mind that you don't need to set the style on every <td>, just on the <th>. All of the above answers would work, but I would prefer to set a class on the <th> and apply the width styles that way.
<table id="theList">
<thead>
<tr>
<th class='header-250' >Item</th>
<th class='header-50' >Price</th>
</tr>
....
</table>
And CSS:
.header-250 {
width: 250px;
color: red; //example
}
.header-50 {
width: 50px;
}
Just my style. I'm not a fan of inline styles, just for the simple fact you MAY want to style the headers differently. If you don't need that, inline would work fine.
You can do this by writing an inline style into your HTML markup.
<table id="theList">
<thead>
<tr>
<th style="width: 200px;">Item</th>
<th style="width: 50px;">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 200px;">Milk</td>
<td style="width: 50px;">1.99</td>
...
You can use the COL element.
<table id="theList">
<col class="column1" style="width: 200px;">
<col class="column2" style="width: 50px;">
.
.
.
</table>
Demo 1 uses inline styles
Demo 2 uses css
Personally, I'd specify width on all columns of first row using inline styles (all but one column if table itself has a width).