Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Table width not updated when I hide native scroller of div

Tags:

html

css

I need some tricky layout for my project.In this layout i have container div and a table with 100% width. I want to hide the vertical scroller of div element, but content of this div can be scrollable by mouse wheel. For this i have added style to hide the native scroll bar. It works fine when table width was greater than equal to container width. If the table with less than it container, table was not stretched properly with container div. I have assigned 100% width to table but table render to full div. 

.content {
  overflow-y: scroll;
  padding-right: 17px;
  box-sizing: content-box;
  border: 1px solid grey;
  height: 80px;
  width: 100%;
}

.container {
  width: 70%;
  border: 1px solid grey;
  overflow: hidden;
}

td {
  border: 1px solid grey;
}
<div class='container'>
  <div class='content'>
    <table style='width: 100%; border-collapse: collpase; table-layout: fixed;'>
      <colgroup>
        <col style='width: 50px;'>
        <col style='width: 50px;'>
        <col style='width: 50px;'>
        <col style='width: 50px;'>
        <col style='width: 50px;'>
      </colgroup>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
  </div>
</div>

Screenshot

like image 714
mani Avatar asked Dec 24 '22 02:12

mani

2 Answers

<table>

The code provided in question has a typo:

<table style='width:100%;border-collapse: collpase;table-layout: fixed;' >

thereby rendering the <table> to the default style:

border-collapse: separate;

Table 1 & Table 2

Demo 1 has two <table>s:

Table 1

  • with border-collapse: collapse
  • changed .content1 {width:105%;...}
  • changed .container1 {width:250px;...}

Table 2

  • with border-collapse: separate or default
  • changed <table style="width:105%;...">
  • changed .container2 {width:262px;...}

The widths for .container1 and .container2 were changed to fixed widths in order to be consistent with the fixed widths of the columns (each at width:50px).

Table 3 & Table 4

Demo 2 has two <table>s:

Table 3

  • with border-collapse: collapse
  • changed .contentA {width:calc(100% + 17px;...}
  • changed .containerA {width:calc(70% + 17px;...}

Table 4

  • with border-collapse: separate or default
  • changed .contentA {width:calc(100% + 17px;...}
  • changed .containerA {width:calc(70% + 17px;...}

These <table>s are dynamic in width, using calc() css function it compensates for the fixed width of the scrollbar while maintaining relative width percentages.

Demo 1

Fixed Widths

.content1 {
  overflow-y: scroll;
  padding-right: 17px;
  box-sizing: content-box;
  border: 1px solid grey;
  height: 80px;
  /* Changed */
  width: 105%;
}

.content2 {
  overflow-y: scroll;
  padding-right: 17px;
  border: 1px solid grey;
  height: 80px;
  width: 100%;
}

.container1 {
  /* Changed */
  width: 250px;
  border: 1px solid grey;
  overflow: hidden;
}

.container2 {
  /* Changed */
  width: 262px;
  border: 1px solid grey;
  overflow: hidden;
}

td {
  border: 1px solid grey;
}
<div class='container1'>
  <div class='content1'>
    <table style='width:100%;border-collapse: collapse;table-layout: fixed;'>
      <caption>Table 1</caption>
      <colgroup>
        <col style='width:50px;'>
        <col style='width:50px;'>
        <col style='width:50px;'>
        <col style='width:50px;'>
        <col style='width:50px;'>
      </colgroup>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
  </div>
</div>

<hr>

<div class='container2'>
  <div class='content2'>
    <!--Changed width-->
    <table style='width:105%; table-layout: fixed;'>
      <caption>Table 2</caption>
      <colgroup>
        <col style='width:50px;'>
        <col style='width:50px;'>
        <col style='width:50px;'>
        <col style='width:50px;'>
        <col style='width:50px;'>
      </colgroup>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
  </div>
</div>

Demo 2

Dynamic Widths

.contentA {
  overflow-y: scroll;
  padding-right: 17px;
  box-sizing: content-box;
  border: 1px solid grey;
  height: 80px;
  width: calc(100% + 17px);
}

.containerA {
  width: calc(70% + 17px);
  border: 1px solid grey;
  overflow: hidden;
}

td {
  border: 1px solid grey;
}
<div class='containerA'>
  <div class='contentA'>
    <table style='width:100%;border-collapse: collapse;table-layout: fixed;'>
      <caption>Table 3</caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
  </div>
</div>

<hr>

<div class='containerA'>
  <div class='contentA'>
    <table style='width:100%;table-layout: fixed;'>
      <caption>Table 4</caption>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
      </tr>
    </table>
  </div>
</div>
like image 188
zer00ne Avatar answered Jan 05 '23 18:01

zer00ne

Remove padding-right: 17px; from content

If you do not want scroll use hight:100% and remove overflow-y: scroll;

.content { 
box-sizing: content-box;
border: 1px solid grey;
height: 100%;
width: 100%;
}
.container {
  width: 70%;
  border: 1px solid grey; 
  overflow: hidden;
}
td {
  border: 1px solid grey;
  
}
<div class='container'>
<div class='content'>
<table style='width:100%;border-collapse: collpase;table-layout: fixed;'  >
<colgroup>
  <col style='width:50px;'>
  <col style='width:50px;'>
  <col style='width:50px;'>
  <col style='width:50px;'>
  <col style='width:50px;'>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</table>
</div>
</div>
like image 30
לבני מלכה Avatar answered Jan 05 '23 17:01

לבני מלכה
Sign in to Comment

Related questions

Font awesome in CSS content not rendering on mobile
Progressive Web App - No Manifest Detected
Don't write if string is longer than a number
VS code default all html files to Django templates & comments them in a wrong way (if I press ctrl + /)
Fill only half of the container with a background color
How do I make my custom checkbox accessible?
create hr with css and html with arrow bottom left
vue.js DOM Template Parsing Caveats
raw html in a vue js component (with nuxt)
How to make two columns in one <td> cell? [duplicate]
Bootstrap 4 card-footer does not align to the bottom of the page
How to get HTML5 validation message with selenium?
Hide last two items in a div
Angular 6 - click to make a div editable
Button to open link in new tab
how to make only one flex item strech while other restricted to keep their natural height?
Failed prop type: Invalid prop `responsive` of type `string` supplied to `Image`, expected `boolean`
Should <button> contain nested DOM element or not?
ngx datatable vertical scroll with rowheight set to auto
How to add download button in video player with Plyr JS?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!