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

Responsive HTML Table While Avoiding Display Block

Tags:

html

css

html-table

display

I have a table style that renders fine when its given enough space:

enter image description here

However, when the width of the parent container is not wide enough the table is hidden:

enter image description here

I can fix this by adding display: block on the table. This will add a horizontal scrollbar:

enter image description here

However, this causes the header to not take up available space when the parent container is very wide:

enter image description here

Is there a way I can get the scrollbar to appear when the parent container is too small, get the header to take up the available space and maintain the look and feel of the table?

:root {
  --global-title-color: black;
  --global-content-background-color: lightgreen;
  --global-background-color: lightblue;
  --global-border-color: red;
  --global-border-radius: 5px;
  --global-border-width-1: 1px;
  --global-font-size-1: 20px;
  --global-font-weight-bold: bold;
  --global-space-fixed-2: 5px;
  --global-space-fixed-3: 10px;
}

.container {
  display: block;
  background: yellow;
  resize: horizontal;
  overflow: hidden;
  min-height: 150px;
}

table {
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1)
    var(--global-border-width-1);
  border-spacing: 0;
  overflow: auto;
  width: 100%;

  thead {
    th {
      color: var(--global-background-color);
      background-color: var(--global-title-color);
      font-weight: var(--global-font-weight-bold);
      font-size: var(--global-font-size-1);
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: bottom;
    }

    th:first-child {
      border-top-left-radius: var(--global-border-radius);
    }

    th:last-child {
      border-top-right-radius: var(--global-border-radius);
    }
  }

  tbody {
    td {
      border-top: var(--global-border-width-1) solid var(--global-border-color);
      min-width: 100px;
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: top;
    }

    tr:nth-child(2n) {
      background-color: var(--global-background-color);
    }

    tr:last-child {
      td:first-child {
        border-bottom-left-radius: var(--global-border-radius);
      }

      td:last-child {
        border-bottom-right-radius: var(--global-border-radius);
      }
    }
  }
}
<div class="container">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p>
  <table>
    <thead>
      <tr>
        <th>SDK</th>
        <th>Default namespaces</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Microsoft.NET.Sdk</td>
        <td><code class="language-inline-text">System.Collections.Generic</code></td>
      </tr>
      <tr>
        <td>Microsoft.NET.Sdk.Web</td>
        <td><code class="language-inline-text">System.Net.Http.Json</code></td>
      </tr>

    </tbody>
  </table>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum tempore. Quas harum dolores totam voluptatem deserunt et praesentium nihil placeat. Voluptas.</p>
</div>

All code is also available in the CodePen below:

https://codepen.io/muhammadrehansaeed/pen/JjydLVV?editors=1100

like image 871
Muhammad Rehan Saeed Avatar asked Oct 13 '21 13:10

Muhammad Rehan Saeed

People also ask

How do I make a table row responsive in HTML?

The primary method of making a responsive table is to add a class table table-responsive inside the table tag. To make a table responsive, we wrap the whole table inside a container tag like div with property overflow-x equals to auto .

How do I make table columns responsive in HTML?

The best way to do this would be with div s and using CSS' display: table , display: table-row and display: table-cell properties, along with some breakpoints. Otherwise, you're going to have a lot of ugly code. This isn't the semantically greatest solution, but as far as responsive goes, it does work.

Can tables be responsive?

You can make tables responsive. Responsive tables will become smaller when possible. If not possible, they can read just their format so that mobile users can still read and use them. Like other website elements, tables should be responsive.

Which of the following is correct approach to make a table responsive?

35. Which of the following is the correct approach to make a table responsive? Answer: A) Adding a container element (like <div>) with overflow-x:auto around the <table> element will make it responsive.

Video Answer

2 Answers

Try this solution with the table display: block; I know you want to avoid using display: block;, but for the scroll, must be a static container. As you mentioned above:

However, this causes the header to not take up available space when the parent container is very wide

To fix this you can set the header cell width: 0.1%.

th {
  width: 0.1%;
  white-space: nowrap;
}


:root {
  --global-title-color: black;
  --global-content-background-color: lightgreen;
  --global-background-color: lightblue;
  --global-border-color: red;
  --global-border-radius: 5px;
  --global-border-width-1: 1px;
  --global-font-size-1: 20px;
  --global-font-weight-bold: bold;
  --global-space-fixed-2: 5px;
  --global-space-fixed-3: 10px;
}

.container {
  display: block;
  background: yellow;
  resize: horizontal;
  overflow: hidden;
  min-height: 150px;
}

table {
  display: block;
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1) var(--global-border-width-1);
  border-spacing: 0;
  overflow: auto;
}

th {
  width: 0.1%;
  white-space: nowrap;
}

th {
  color: var(--global-background-color);
  background-color: var(--global-title-color);
  font-weight: var(--global-font-weight-bold);
  font-size: var(--global-font-size-1);
  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
  vertical-align: bottom;
  white-space: nowrap;
}

th:first-child {
  border-top-left-radius: var(--global-border-radius);
}

th:last-child {
  border-top-right-radius: var(--global-border-radius);
}

td {
  border-top: var(--global-border-width-1) solid var(--global-border-color);
  /* min-width: 100px; /* /* changed */
  padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
  vertical-align: top;
}

tr:nth-child(2n) {
  background-color: var(--global-background-color);
}

tr:last-child td:first-child {
  border-bottom-left-radius: var(--global-border-radius);
}

tr:last-child td:last-child {
  border-bottom-right-radius: var(--global-border-radius);
}
<div class="container">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis
        voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum
        tempore. Quas harum dolores totam voluptatem deserunt et praesentium
        nihil placeat. Voluptas.
      </p>
      <table>
        <thead>
          <tr>
            <th>SDK</th>
            <th>Default namespaces</th>
            <th>Values</th>
            <th>Default</th>
            <th>Other stuff</th>
            <th>#</th>
            <th>SDK</th>
            <th>Namespaces</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Microsoft.NET.Sdk</td>
            <td>
              <code class="language-inline-text"
                >System.Collections.Generic</code
              >
            </td>
            <td>Values</td>
            <td>
              <code class="language-inline-text">Generic</code>
            </td>
            <td>Microsoft.NET.Sdk</td>
            <td>
              <code class="language-inline-text">00</code>
            </td>
            <td>NET.Sdk</td>
            <td>
              <code class="language-inline-text"
                >System.Collections.Generic</code
              >
            </td>
          </tr>
          <tr>
            <td>Microsoft.NET.Sdk.Web</td>
            <td>
              <code class="language-inline-text">System.Net.Http.Json</code>
            </td>
            <td>Web</td>
            <td>
              <code class="language-inline-text">System.Net.Http.Json</code>
            </td>
            <td>Microsoft.NET.Sdk.Web</td>
            <td>
              <code class="language-inline-text">33</code>
            </td>
            <td>Sdk.Web</td>
            <td>
              <code class="language-inline-text">Http.Json</code>
            </td>
          </tr>
        </tbody>
      </table>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facilis
        voluptatum inventore iure blanditiis ab ipsum nostrum repellat cum
        tempore. Quas harum dolores totam voluptatem deserunt et praesentium
        nihil placeat. Voluptas.
      </p>
    </div>
like image 121
Anton Avatar answered Oct 08 '22 08:10

Anton

You can remove display: block; on table and replace overflow: hidden; with overflow: auto; on .container.

:root {
  --global-title-color: black;
  --global-content-background-color: lightgreen;
  --global-background-color: lightblue;
  --global-border-color: red;
  --global-border-radius: 5px;
  --global-border-width-1: 1px;
  --global-font-size-1: 20px;
  --global-font-weight-bold: bold;
  --global-space-fixed-2: 5px;
  --global-space-fixed-3: 10px;
}

.container {
  display: block;
  background: yellow;
  resize: horizontal;
  overflow: auto;
  min-height: 150px;
}

table {
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1)
    var(--global-border-width-1);
  border-spacing: 0;
  overflow: auto;
  width: 100%;

  thead {
    th {
      color: var(--global-background-color);
      background-color: var(--global-title-color);
      font-weight: var(--global-font-weight-bold);
      font-size: var(--global-font-size-1);
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: bottom;
    }

    th:first-child {
      border-top-left-radius: var(--global-border-radius);
    }

    th:last-child {
      border-top-right-radius: var(--global-border-radius);
    }
  }

  tbody {
    td {
      border-top: var(--global-border-width-1) solid var(--global-border-color);
      min-width: 100px;
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: top;
    }

    tr:nth-child(2n) {
      background-color: var(--global-background-color);
    }

    tr:last-child {
      td:first-child {
        border-bottom-left-radius: var(--global-border-radius);
      }

      td:last-child {
        border-bottom-right-radius: var(--global-border-radius);
      }
    }
  }
}
<div class="container">

<table>
<thead>
<tr>
<th>SDK</th>
<th>Default namespaces</th>
</tr>
</thead>
<tbody>
<tr>
<td>Microsoft.NET.Sdk</td>
<td><code class="language-inline-text">System.Collections.Generic</code></td>
</tr>
<tr>
<td>Microsoft.NET.Sdk.Web</td>
<td><code class="language-inline-text">System.Net.Http.Json</code></td>
</tr>

</tbody>
</table>
  
</div>
like image 2
Tom Avatar answered Oct 08 '22 09:10

Tom
Sign in to Comment

Related questions

Can Firefox display JP2 images?
Perfectly vertical align top of fonts of 2 different text sizes using CSS
Flex box: Fill remaining space but justify content center
Counter for TinyMCE is not working as expected
How to use PHP to annotate an string with HTML (i.e How. insert HTML tags to an string by offsets mantaining a valid HTML)?
CSS filter brightness: can it be applied separately to border and body of one element?
Make HTML5 FileReader working with heic files
Navigate into layer using arrow key
Open Excel file url in excel (from source, not downloaded copy)
Change color of Sticky text when its active
Plain javascript trigger css fade out, ajax load content, fade in using CSS
How to hide video loading spinner in HTML5 video tag?
Connect Line Between 2 Elements - Javascript
Share content of a webpage to Instagram story
How to preload an SVG image properly?
document.scripts is not equal to document.getElementsByTagName("script")
How do I position the caret inside a span element that has no text inside of it yet?
TD with rowspan has more height than content (nested table): 1px diff in border placement of nested tables mimic the same row height of outer table
DOMParser for large html
Draw a line from one element to multiple elements on click

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!