I created an app using Element () and I'm struggling with making a table responsive.

When I make my window wider everything works perfect, however when I make it narrower the table width remains the same, I tried all table options, but nothing seems to make it better, here is my example: , after refreshing the page the table resizes properly.

I found that if I ment these lines in element-uimon.js:

  this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
  this.table.resizeState.width = this.bodyWidth;

it works, however I am not sure if other options still work then.

Can you help me please? Is there any way to make this table responsive? :)

I created an app using Element (https://element.eleme.io/#/en-US) and I'm struggling with making a table responsive.

When I make my window wider everything works perfect, however when I make it narrower the table width remains the same, I tried all table options, but nothing seems to make it better, here is my example: https://streamable./1j1e1, after refreshing the page the table resizes properly.

I found that if I ment these lines in element-ui.mon.js:

  this.bodyWidth = Math.max(bodyMinWidth, bodyWidth);
  this.table.resizeState.width = this.bodyWidth;

it works, however I am not sure if other options still work then.

Can you help me please? Is there any way to make this table responsive? :)

• javascript
• html
• css
• responsive-design
• responsive

6 Answers 6

I just found out if I have a custom table class on my <el-table> element I get the same behaviour as you. If I remove it, it works fine.

Change

<el-table class-name="myTable">...<el-table>

To

<el-table>...<el-table>

Then you can directly change the css of the .el-table class like this:

.el-table {
  ...
}

It's a shame it's still an ongoing issue years later.

Use the following css-it will show 4 columns each row you can change the percent for displaying more or less colums each row:

@media only screen and (max-width: 770px) {
  table tr td{
    float: left;
    width:25%;
  }
}

I am a little late to the party but as I stumbled upon the same problem just now, I thought I'd share my findings:

I was having the exact same problem, when I was wrapping my table in a div or span. Perfect responsiveness whilst expanding, but not responsive at all, when shrinking the browser window again. As if it got stuck at the largest width.

As I really needed to wrap my table in something to use v-if and hide the whole table ponent at times, I kept trying and finally found out that the table behaves normally when wrapped in a <template>-tag.

It helped me - style='max-width: 99%'

<div class="list" style="max-width: 99%">
  <el-table...

kavinraj's way to do it is a great solution. If the table is realy realy wide you could also wrap it in a div.

<div class="table-container">
    <table></table>
</div>

@media screen and (max-width:768px) {
    .table-container {
        overflow: auto;
    }
}

A user can swipe to view the rest of the table

I not aware of data attribute binding in Element UI, so I shared the code for a responsive table with pure HTML and CSS only. When it es to mobile/tablet view we can use data attribute to show the table.

.rwd-table {
  margin: 1em 0;
  min-width: 300px;
}
.rwd-table tr {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.rwd-table th {
  display: none;
}
.rwd-table td {
  display: block;
}
.rwd-table td:first-child {
  padding-top: .5em;
}
.rwd-table td:last-child {
  padding-bottom: .5em;
}
.rwd-table td:before {
  content: attr(data-th) ": ";
  font-weight: bold;
  width: 6.5em;
  display: inline-block;
}
@media (min-width: 480px) {
  .rwd-table td:before {
    display: none;
  }
}
.rwd-table th, .rwd-table td {
  text-align: left;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    display: table-cell;
    padding: .25em .5em;
  }
  .rwd-table th:first-child, .rwd-table td:first-child {
    padding-left: 0;
  }
  .rwd-table th:last-child, .rwd-table td:last-child {
    padding-right: 0;
  }
}

body {
  padding: 0 2em;
  color: #444;
  background: #eee;
}

h1 {
  font-weight: normal;
  letter-spacing: -1px;
  color: #34495E;
}

.rwd-table {
  background: #34495E;
  color: #fff;
  border-radius: .4em;
  overflow: hidden;
}
.rwd-table tr {
  border-color: #46637f;
}
.rwd-table th, .rwd-table td {
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .rwd-table th, .rwd-table td {
    padding: 1em !important;
  }
}
.rwd-table th, .rwd-table td:before {
  color: #dd5;
}

<table class="rwd-table">
  <tr>
    <th>Movie Title</th>
    <th>Genre</th>
    <th>Year</th>
    <th>Gross</th>
  </tr>
  <tr>
    <td data-th="Movie Title">Star Wars</td>
    <td data-th="Genre">Adventure, Sci-fi</td>
    <td data-th="Year">1977</td>
    <td data-th="Gross">$460,935,665</td>
  </tr>
  <tr>
    <td data-th="Movie Title">Howard The Duck</td>
    <td data-th="Genre">"Comedy"</td>
    <td data-th="Year">1986</td>
    <td data-th="Gross">$16,295,774</td>
  </tr>
  <tr>
    <td data-th="Movie Title">American Graffiti</td>
    <td data-th="Genre">Comedy, Drama</td>
    <td data-th="Year">1973</td>
    <td data-th="Gross">$115,000,000</td>
  </tr>
</table>