table is not being responsive with css properly on smaller devices?

up vote
1
down vote

favorite

I am coming to a problem where I am trying to make my table responsive. It work in this case but table-layout: fixed; make it worked but, when I resize my columns get together. I use word-break: break-word; but it just made my text squished. When I comment the table-layout:fixed and resize browser it gets my data crushed. How to make it responsive in my code below. thanks for the help.

Here is my code:

table {

  table-layout: fixed;

  margin: auto;

}



th,

td {

  padding: 5px 10px;

}



thead,

tfoot {

  background: #f9f9f9;

  display: table;

  width: 100%;

  width: calc(100% - 18px);

}



tbody {

  overflow: auto;

  overflow-x: hidden;

  display: block;

  width: 100%;

}



tbody tr {

  display: table;

  width: 100%;

  table-layout: fixed;

  word-break: break-word

}

<table>

  <tbody>

    <tr>

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $57.36</td>

      <td class="left-header"> $58.94</td>

      <td class="left-header"> $60.56</td>

      <td class="left-header"> $62.23</td>

      <td class="left-header"> $65.70</td>

      <td class="left-header"> $69.37</td>

      <td class="left-header"> $73.23</td>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $4,588.80</td>

      <td class="left-header"> $4,715.20</td>

      <td class="left-header"> $4,844.80</td>

      <td class="left-header"> $4,978.40</td>

      <td class="left-header"> $5,256.00</td>

      <td class="left-header"> $5,549.60</td>

      <td class="left-header"> $5,858.40</td>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $119,767.68</td>

      <td class="left-header"> $123,066.72</td>

      <td class="left-header"> $126,449.28</td>

      <td class="left-header"> $129,936.24</td>

      <td class="left-header"> $137,181.60</td>

      <td class="left-header"> $144,844.56</td>

      <td class="left-header"> $152,904.24</td>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

asked yesterday

VA DEV

717

add a comment |

up vote
1
down vote

favorite

Here is my code:

table {

  table-layout: fixed;

  margin: auto;

}



th,

td {

  padding: 5px 10px;

}



thead,

tfoot {

  background: #f9f9f9;

  display: table;

  width: 100%;

  width: calc(100% - 18px);

}



tbody {

  overflow: auto;

  overflow-x: hidden;

  display: block;

  width: 100%;

}



tbody tr {

  display: table;

  width: 100%;

  table-layout: fixed;

  word-break: break-word

}

<table>

  <tbody>

    <tr>

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $57.36</td>

      <td class="left-header"> $58.94</td>

      <td class="left-header"> $60.56</td>

      <td class="left-header"> $62.23</td>

      <td class="left-header"> $65.70</td>

      <td class="left-header"> $69.37</td>

      <td class="left-header"> $73.23</td>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $4,588.80</td>

      <td class="left-header"> $4,715.20</td>

      <td class="left-header"> $4,844.80</td>

      <td class="left-header"> $4,978.40</td>

      <td class="left-header"> $5,256.00</td>

      <td class="left-header"> $5,549.60</td>

      <td class="left-header"> $5,858.40</td>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $119,767.68</td>

      <td class="left-header"> $123,066.72</td>

      <td class="left-header"> $126,449.28</td>

      <td class="left-header"> $129,936.24</td>

      <td class="left-header"> $137,181.60</td>

      <td class="left-header"> $144,844.56</td>

      <td class="left-header"> $152,904.24</td>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

asked yesterday

VA DEV

717

add a comment |

up vote
1
down vote

favorite

Here is my code:

table {

  table-layout: fixed;

  margin: auto;

}



th,

td {

  padding: 5px 10px;

}



thead,

tfoot {

  background: #f9f9f9;

  display: table;

  width: 100%;

  width: calc(100% - 18px);

}



tbody {

  overflow: auto;

  overflow-x: hidden;

  display: block;

  width: 100%;

}



tbody tr {

  display: table;

  width: 100%;

  table-layout: fixed;

  word-break: break-word

}

<table>

  <tbody>

    <tr>

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $57.36</td>

      <td class="left-header"> $58.94</td>

      <td class="left-header"> $60.56</td>

      <td class="left-header"> $62.23</td>

      <td class="left-header"> $65.70</td>

      <td class="left-header"> $69.37</td>

      <td class="left-header"> $73.23</td>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $4,588.80</td>

      <td class="left-header"> $4,715.20</td>

      <td class="left-header"> $4,844.80</td>

      <td class="left-header"> $4,978.40</td>

      <td class="left-header"> $5,256.00</td>

      <td class="left-header"> $5,549.60</td>

      <td class="left-header"> $5,858.40</td>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $119,767.68</td>

      <td class="left-header"> $123,066.72</td>

      <td class="left-header"> $126,449.28</td>

      <td class="left-header"> $129,936.24</td>

      <td class="left-header"> $137,181.60</td>

      <td class="left-header"> $144,844.56</td>

      <td class="left-header"> $152,904.24</td>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

asked yesterday

VA DEV

717

Here is my code:

table {

  table-layout: fixed;

  margin: auto;

}



th,

td {

  padding: 5px 10px;

}



thead,

tfoot {

  background: #f9f9f9;

  display: table;

  width: 100%;

  width: calc(100% - 18px);

}



tbody {

  overflow: auto;

  overflow-x: hidden;

  display: block;

  width: 100%;

}



tbody tr {

  display: table;

  width: 100%;

  table-layout: fixed;

  word-break: break-word

}

<table>

  <tbody>

    <tr>

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $57.36</td>

      <td class="left-header"> $58.94</td>

      <td class="left-header"> $60.56</td>

      <td class="left-header"> $62.23</td>

      <td class="left-header"> $65.70</td>

      <td class="left-header"> $69.37</td>

      <td class="left-header"> $73.23</td>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $4,588.80</td>

      <td class="left-header"> $4,715.20</td>

      <td class="left-header"> $4,844.80</td>

      <td class="left-header"> $4,978.40</td>

      <td class="left-header"> $5,256.00</td>

      <td class="left-header"> $5,549.60</td>

      <td class="left-header"> $5,858.40</td>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $119,767.68</td>

      <td class="left-header"> $123,066.72</td>

      <td class="left-header"> $126,449.28</td>

      <td class="left-header"> $129,936.24</td>

      <td class="left-header"> $137,181.60</td>

      <td class="left-header"> $144,844.56</td>

      <td class="left-header"> $152,904.24</td>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

table {

  table-layout: fixed;

  margin: auto;

}



th,

td {

  padding: 5px 10px;

}



thead,

tfoot {

  background: #f9f9f9;

  display: table;

  width: 100%;

  width: calc(100% - 18px);

}



tbody {

  overflow: auto;

  overflow-x: hidden;

  display: block;

  width: 100%;

}



tbody tr {

  display: table;

  width: 100%;

  table-layout: fixed;

  word-break: break-word

}

<table>

  <tbody>

    <tr>

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $57.36</td>

      <td class="left-header"> $58.94</td>

      <td class="left-header"> $60.56</td>

      <td class="left-header"> $62.23</td>

      <td class="left-header"> $65.70</td>

      <td class="left-header"> $69.37</td>

      <td class="left-header"> $73.23</td>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $4,588.80</td>

      <td class="left-header"> $4,715.20</td>

      <td class="left-header"> $4,844.80</td>

      <td class="left-header"> $4,978.40</td>

      <td class="left-header"> $5,256.00</td>

      <td class="left-header"> $5,549.60</td>

      <td class="left-header"> $5,858.40</td>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $119,767.68</td>

      <td class="left-header"> $123,066.72</td>

      <td class="left-header"> $126,449.28</td>

      <td class="left-header"> $129,936.24</td>

      <td class="left-header"> $137,181.60</td>

      <td class="left-header"> $144,844.56</td>

      <td class="left-header"> $152,904.24</td>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

table {

  table-layout: fixed;

  margin: auto;

}



th,

td {

  padding: 5px 10px;

}



thead,

tfoot {

  background: #f9f9f9;

  display: table;

  width: 100%;

  width: calc(100% - 18px);

}



tbody {

  overflow: auto;

  overflow-x: hidden;

  display: block;

  width: 100%;

}



tbody tr {

  display: table;

  width: 100%;

  table-layout: fixed;

  word-break: break-word

}

<table>

  <tbody>

    <tr>

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $57.36</td>

      <td class="left-header"> $58.94</td>

      <td class="left-header"> $60.56</td>

      <td class="left-header"> $62.23</td>

      <td class="left-header"> $65.70</td>

      <td class="left-header"> $69.37</td>

      <td class="left-header"> $73.23</td>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $4,588.80</td>

      <td class="left-header"> $4,715.20</td>

      <td class="left-header"> $4,844.80</td>

      <td class="left-header"> $4,978.40</td>

      <td class="left-header"> $5,256.00</td>

      <td class="left-header"> $5,549.60</td>

      <td class="left-header"> $5,858.40</td>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="odd">

      <td class="left-header">Test</td>

      <td class="left-header"> $119,767.68</td>

      <td class="left-header"> $123,066.72</td>

      <td class="left-header"> $126,449.28</td>

      <td class="left-header"> $129,936.24</td>

      <td class="left-header"> $137,181.60</td>

      <td class="left-header"> $144,844.56</td>

      <td class="left-header"> $152,904.24</td>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

html css

asked yesterday

VA DEV

717

asked yesterday

VA DEV

717

asked yesterday

VA DEV

717

asked yesterday

VA DEV

717

asked yesterday

VA DEV

717

add a comment |

3 Answers
3

active

oldest

votes

up vote
2
down vote

There is no way with this long columns. You have to re think something different for responsive layouts (May be stacking the columns with relevant headers). Its the same principal applies to html emails.

answered yesterday

digiwavez

212

New contributor

add a comment |

up vote
0
down vote

Have your tried this instead:

<div style="overflow-x:auto;">

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered yesterday

Denis Kovzelyuk

244

I don't want to use a scrollbar - though.
– VA DEV
yesterday

and is not being responsive anyhow.
– VA DEV
yesterday

you still need table { width: 100% } CSS property
– Denis Kovzelyuk
yesterday

For table this width you probably need a scroll bar. There is no more elegant way as I know of... unfortunately
– Denis Kovzelyuk
yesterday

In my code above works perfectly. Is only my text getting squished when I resize my browser.
– VA DEV
yesterday

|
show 3 more comments

up vote
0
down vote

You dont need to use table. You can do the same with Divs and CSS to get more control.
But if you really need, i suggest this approach:

table {

  margin: auto;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td {

  padding: 5px 10px;

}



tr {

  border-bottom: 1px solid #ccc;

}



thead th {

  border-bottom: 2px solid #ddd;

}





/* You will need to display:none the duplicated header in responsible-table-item*/



tr.responsive-table-item .responsive-table-cell {

  display: none

}





/* Add screen proportion or class when break occurs */



@media (max-width: 400px) {

  /* Hide table headers */

  .table-header {

    display: none;

  }

  tr.responsive-table-item {

    display: block;

  }

  tr.responsive-table-item .responsive-table-cell {

    display: inline-block;

  }

  tr.responsive-table-item td:first-child {

    background-color: #ccc;

    display: block;

    text-align: center;

    width: 100%;

  }

  tr.responsive-table-item td,

  tr.responsive-table-item th {

    display: inline-block;

    width: calc(50% - 22px);

    /* Cell Border + padding*/

    word-break: break-all;

    vertical-align: top;

  }

}

<table class="responsive-table">

  <thead>

    <tr class="table-header">

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

  </thead>

  <tbody>

    <!-- Using this way, you will need to duplicate your table header in each TR to use in mobile display -->

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $57.36</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $58.94</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $60.56</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $62.23</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $65.70</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $69.37</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $73.23</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $4,588.80</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $4,715.20</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $4,844.80</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $4,978.40</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $5,256.00</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $5,549.60</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $5,858.40</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $119,767.68</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $123,066.72</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $126,449.28</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $129,936.24</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $137,181.60</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $144,844.56</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $152,904.24</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

edited 16 hours ago

answered yesterday

Giovan Cruz

408

what happen to my class="odd" ?
– VA DEV
yesterday

I apply your code and still it does resize the table
– VA DEV
yesterday

Man, if you need "odd" class you can append class="responsive-table-item odd". You are doing something wrong. If you run this snippet above, the code don't work? Put all inside one [codepen] (codepen.io) and send here.
– Giovan Cruz
yesterday

But, I am telling you that when you resize it wont be as a mobile view. I don't want to use the button though. Here's a codepen: codepen.io/anon/pen/pQaWrN
– VA DEV
yesterday

try to resize your browser and see if the table does shrink into mobile
– VA DEV
yesterday

|
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53416976%2ftable-is-not-being-responsive-with-css-properly-on-smaller-devices%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
2
down vote

answered yesterday

digiwavez

212

New contributor

add a comment |

up vote
2
down vote

answered yesterday

digiwavez

212

New contributor

add a comment |

up vote
2
down vote

answered yesterday

digiwavez

212

New contributor

answered yesterday

digiwavez

212

New contributor

answered yesterday

digiwavez

212

New contributor

answered yesterday

digiwavez

212

answered yesterday

digiwavez

212

New contributor

digiwavez is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a comment |

up vote
0
down vote

Have your tried this instead:

<div style="overflow-x:auto;">

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered yesterday

Denis Kovzelyuk

244

I don't want to use a scrollbar - though.
– VA DEV
yesterday

and is not being responsive anyhow.
– VA DEV
yesterday

you still need table { width: 100% } CSS property
– Denis Kovzelyuk
yesterday

For table this width you probably need a scroll bar. There is no more elegant way as I know of... unfortunately
– Denis Kovzelyuk
yesterday

In my code above works perfectly. Is only my text getting squished when I resize my browser.
– VA DEV
yesterday

|
show 3 more comments

up vote
0
down vote

Have your tried this instead:

<div style="overflow-x:auto;">

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered yesterday

Denis Kovzelyuk

244

I don't want to use a scrollbar - though.
– VA DEV
yesterday

and is not being responsive anyhow.
– VA DEV
yesterday

you still need table { width: 100% } CSS property
– Denis Kovzelyuk
yesterday

For table this width you probably need a scroll bar. There is no more elegant way as I know of... unfortunately
– Denis Kovzelyuk
yesterday

In my code above works perfectly. Is only my text getting squished when I resize my browser.
– VA DEV
yesterday

|
show 3 more comments

up vote
0
down vote

Have your tried this instead:

<div style="overflow-x:auto;">

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered yesterday

Denis Kovzelyuk

244

Have your tried this instead:

<div style="overflow-x:auto;">

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered yesterday

Denis Kovzelyuk

244

answered yesterday

Denis Kovzelyuk

244

answered yesterday

Denis Kovzelyuk

244

answered yesterday

Denis Kovzelyuk

244

I don't want to use a scrollbar - though.
– VA DEV
yesterday

and is not being responsive anyhow.
– VA DEV
yesterday

you still need table { width: 100% } CSS property
– Denis Kovzelyuk
yesterday

For table this width you probably need a scroll bar. There is no more elegant way as I know of... unfortunately
– Denis Kovzelyuk
yesterday

In my code above works perfectly. Is only my text getting squished when I resize my browser.
– VA DEV
yesterday

|
show 3 more comments

I don't want to use a scrollbar - though.
– VA DEV
yesterday

and is not being responsive anyhow.
– VA DEV
yesterday

you still need table { width: 100% } CSS property
– Denis Kovzelyuk
yesterday

For table this width you probably need a scroll bar. There is no more elegant way as I know of... unfortunately
– Denis Kovzelyuk
yesterday

In my code above works perfectly. Is only my text getting squished when I resize my browser.
– VA DEV
yesterday

I don't want to use a scrollbar - though.
– VA DEV
yesterday

and is not being responsive anyhow.
– VA DEV
yesterday

you still need table { width: 100% } CSS property
– Denis Kovzelyuk
yesterday

For table this width you probably need a scroll bar. There is no more elegant way as I know of... unfortunately
– Denis Kovzelyuk
yesterday

In my code above works perfectly. Is only my text getting squished when I resize my browser.
– VA DEV
yesterday

|
show 3 more comments

up vote
0
down vote

You dont need to use table. You can do the same with Divs and CSS to get more control.
But if you really need, i suggest this approach:

table {

  margin: auto;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td {

  padding: 5px 10px;

}



tr {

  border-bottom: 1px solid #ccc;

}



thead th {

  border-bottom: 2px solid #ddd;

}





/* You will need to display:none the duplicated header in responsible-table-item*/



tr.responsive-table-item .responsive-table-cell {

  display: none

}





/* Add screen proportion or class when break occurs */



@media (max-width: 400px) {

  /* Hide table headers */

  .table-header {

    display: none;

  }

  tr.responsive-table-item {

    display: block;

  }

  tr.responsive-table-item .responsive-table-cell {

    display: inline-block;

  }

  tr.responsive-table-item td:first-child {

    background-color: #ccc;

    display: block;

    text-align: center;

    width: 100%;

  }

  tr.responsive-table-item td,

  tr.responsive-table-item th {

    display: inline-block;

    width: calc(50% - 22px);

    /* Cell Border + padding*/

    word-break: break-all;

    vertical-align: top;

  }

}

<table class="responsive-table">

  <thead>

    <tr class="table-header">

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

  </thead>

  <tbody>

    <!-- Using this way, you will need to duplicate your table header in each TR to use in mobile display -->

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $57.36</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $58.94</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $60.56</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $62.23</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $65.70</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $69.37</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $73.23</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $4,588.80</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $4,715.20</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $4,844.80</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $4,978.40</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $5,256.00</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $5,549.60</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $5,858.40</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $119,767.68</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $123,066.72</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $126,449.28</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $129,936.24</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $137,181.60</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $144,844.56</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $152,904.24</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

edited 16 hours ago

answered yesterday

Giovan Cruz

408

what happen to my class="odd" ?
– VA DEV
yesterday

I apply your code and still it does resize the table
– VA DEV
yesterday

Man, if you need "odd" class you can append class="responsive-table-item odd". You are doing something wrong. If you run this snippet above, the code don't work? Put all inside one [codepen] (codepen.io) and send here.
– Giovan Cruz
yesterday

But, I am telling you that when you resize it wont be as a mobile view. I don't want to use the button though. Here's a codepen: codepen.io/anon/pen/pQaWrN
– VA DEV
yesterday

try to resize your browser and see if the table does shrink into mobile
– VA DEV
yesterday

|
show 2 more comments

up vote
0
down vote

You dont need to use table. You can do the same with Divs and CSS to get more control.
But if you really need, i suggest this approach:

table {

  margin: auto;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td {

  padding: 5px 10px;

}



tr {

  border-bottom: 1px solid #ccc;

}



thead th {

  border-bottom: 2px solid #ddd;

}





/* You will need to display:none the duplicated header in responsible-table-item*/



tr.responsive-table-item .responsive-table-cell {

  display: none

}





/* Add screen proportion or class when break occurs */



@media (max-width: 400px) {

  /* Hide table headers */

  .table-header {

    display: none;

  }

  tr.responsive-table-item {

    display: block;

  }

  tr.responsive-table-item .responsive-table-cell {

    display: inline-block;

  }

  tr.responsive-table-item td:first-child {

    background-color: #ccc;

    display: block;

    text-align: center;

    width: 100%;

  }

  tr.responsive-table-item td,

  tr.responsive-table-item th {

    display: inline-block;

    width: calc(50% - 22px);

    /* Cell Border + padding*/

    word-break: break-all;

    vertical-align: top;

  }

}

<table class="responsive-table">

  <thead>

    <tr class="table-header">

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

  </thead>

  <tbody>

    <!-- Using this way, you will need to duplicate your table header in each TR to use in mobile display -->

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $57.36</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $58.94</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $60.56</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $62.23</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $65.70</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $69.37</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $73.23</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $4,588.80</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $4,715.20</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $4,844.80</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $4,978.40</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $5,256.00</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $5,549.60</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $5,858.40</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $119,767.68</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $123,066.72</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $126,449.28</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $129,936.24</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $137,181.60</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $144,844.56</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $152,904.24</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

edited 16 hours ago

answered yesterday

Giovan Cruz

408

what happen to my class="odd" ?
– VA DEV
yesterday

I apply your code and still it does resize the table
– VA DEV
yesterday

Man, if you need "odd" class you can append class="responsive-table-item odd". You are doing something wrong. If you run this snippet above, the code don't work? Put all inside one [codepen] (codepen.io) and send here.
– Giovan Cruz
yesterday

But, I am telling you that when you resize it wont be as a mobile view. I don't want to use the button though. Here's a codepen: codepen.io/anon/pen/pQaWrN
– VA DEV
yesterday

try to resize your browser and see if the table does shrink into mobile
– VA DEV
yesterday

|
show 2 more comments

up vote
0
down vote

You dont need to use table. You can do the same with Divs and CSS to get more control.
But if you really need, i suggest this approach:

table {

  margin: auto;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td {

  padding: 5px 10px;

}



tr {

  border-bottom: 1px solid #ccc;

}



thead th {

  border-bottom: 2px solid #ddd;

}





/* You will need to display:none the duplicated header in responsible-table-item*/



tr.responsive-table-item .responsive-table-cell {

  display: none

}





/* Add screen proportion or class when break occurs */



@media (max-width: 400px) {

  /* Hide table headers */

  .table-header {

    display: none;

  }

  tr.responsive-table-item {

    display: block;

  }

  tr.responsive-table-item .responsive-table-cell {

    display: inline-block;

  }

  tr.responsive-table-item td:first-child {

    background-color: #ccc;

    display: block;

    text-align: center;

    width: 100%;

  }

  tr.responsive-table-item td,

  tr.responsive-table-item th {

    display: inline-block;

    width: calc(50% - 22px);

    /* Cell Border + padding*/

    word-break: break-all;

    vertical-align: top;

  }

}

<table class="responsive-table">

  <thead>

    <tr class="table-header">

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

  </thead>

  <tbody>

    <!-- Using this way, you will need to duplicate your table header in each TR to use in mobile display -->

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $57.36</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $58.94</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $60.56</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $62.23</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $65.70</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $69.37</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $73.23</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $4,588.80</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $4,715.20</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $4,844.80</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $4,978.40</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $5,256.00</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $5,549.60</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $5,858.40</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $119,767.68</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $123,066.72</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $126,449.28</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $129,936.24</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $137,181.60</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $144,844.56</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $152,904.24</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

edited 16 hours ago

answered yesterday

Giovan Cruz

408

You dont need to use table. You can do the same with Divs and CSS to get more control.
But if you really need, i suggest this approach:

table {

  margin: auto;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td {

  padding: 5px 10px;

}



tr {

  border-bottom: 1px solid #ccc;

}



thead th {

  border-bottom: 2px solid #ddd;

}





/* You will need to display:none the duplicated header in responsible-table-item*/



tr.responsive-table-item .responsive-table-cell {

  display: none

}





/* Add screen proportion or class when break occurs */



@media (max-width: 400px) {

  /* Hide table headers */

  .table-header {

    display: none;

  }

  tr.responsive-table-item {

    display: block;

  }

  tr.responsive-table-item .responsive-table-cell {

    display: inline-block;

  }

  tr.responsive-table-item td:first-child {

    background-color: #ccc;

    display: block;

    text-align: center;

    width: 100%;

  }

  tr.responsive-table-item td,

  tr.responsive-table-item th {

    display: inline-block;

    width: calc(50% - 22px);

    /* Cell Border + padding*/

    word-break: break-all;

    vertical-align: top;

  }

}

<table class="responsive-table">

  <thead>

    <tr class="table-header">

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

  </thead>

  <tbody>

    <!-- Using this way, you will need to duplicate your table header in each TR to use in mobile display -->

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $57.36</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $58.94</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $60.56</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $62.23</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $65.70</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $69.37</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $73.23</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $4,588.80</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $4,715.20</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $4,844.80</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $4,978.40</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $5,256.00</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $5,549.60</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $5,858.40</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $119,767.68</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $123,066.72</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $126,449.28</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $129,936.24</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $137,181.60</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $144,844.56</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $152,904.24</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

table {

  margin: auto;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td {

  padding: 5px 10px;

}



tr {

  border-bottom: 1px solid #ccc;

}



thead th {

  border-bottom: 2px solid #ddd;

}





/* You will need to display:none the duplicated header in responsible-table-item*/



tr.responsive-table-item .responsive-table-cell {

  display: none

}





/* Add screen proportion or class when break occurs */



@media (max-width: 400px) {

  /* Hide table headers */

  .table-header {

    display: none;

  }

  tr.responsive-table-item {

    display: block;

  }

  tr.responsive-table-item .responsive-table-cell {

    display: inline-block;

  }

  tr.responsive-table-item td:first-child {

    background-color: #ccc;

    display: block;

    text-align: center;

    width: 100%;

  }

  tr.responsive-table-item td,

  tr.responsive-table-item th {

    display: inline-block;

    width: calc(50% - 22px);

    /* Cell Border + padding*/

    word-break: break-all;

    vertical-align: top;

  }

}

<table class="responsive-table">

  <thead>

    <tr class="table-header">

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

  </thead>

  <tbody>

    <!-- Using this way, you will need to duplicate your table header in each TR to use in mobile display -->

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $57.36</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $58.94</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $60.56</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $62.23</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $65.70</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $69.37</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $73.23</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $4,588.80</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $4,715.20</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $4,844.80</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $4,978.40</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $5,256.00</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $5,549.60</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $5,858.40</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $119,767.68</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $123,066.72</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $126,449.28</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $129,936.24</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $137,181.60</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $144,844.56</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $152,904.24</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

table {

  margin: auto;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

}



th,

td {

  padding: 5px 10px;

}



tr {

  border-bottom: 1px solid #ccc;

}



thead th {

  border-bottom: 2px solid #ddd;

}





/* You will need to display:none the duplicated header in responsible-table-item*/



tr.responsive-table-item .responsive-table-cell {

  display: none

}





/* Add screen proportion or class when break occurs */



@media (max-width: 400px) {

  /* Hide table headers */

  .table-header {

    display: none;

  }

  tr.responsive-table-item {

    display: block;

  }

  tr.responsive-table-item .responsive-table-cell {

    display: inline-block;

  }

  tr.responsive-table-item td:first-child {

    background-color: #ccc;

    display: block;

    text-align: center;

    width: 100%;

  }

  tr.responsive-table-item td,

  tr.responsive-table-item th {

    display: inline-block;

    width: calc(50% - 22px);

    /* Cell Border + padding*/

    word-break: break-all;

    vertical-align: top;

  }

}

<table class="responsive-table">

  <thead>

    <tr class="table-header">

      <th></th>

      <th class="right-header">Step 1</th>

      <th class="right-header">Step 2</th>

      <th class="right-header">Step 3</th>

      <th class="right-header">Step 4</th>

      <th class="right-header">Step 5</th>

      <th class="right-header">Step 6</th>

      <th class="right-header">Step 7</th>

      <th class="right-header">Step 8</th>

    </tr>

  </thead>

  <tbody>

    <!-- Using this way, you will need to duplicate your table header in each TR to use in mobile display -->

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $57.36</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $58.94</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $60.56</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $62.23</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $65.70</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $69.37</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $73.23</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $77.31</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $4,588.80</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $4,715.20</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $4,844.80</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $4,978.40</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $5,256.00</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $5,549.60</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $5,858.40</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $6,184.80</td>

    </tr>

    <tr class="responsive-table-item">

      <td class="left-header">Test</td>

      <th class="responsive-table-cell">Step 1</th>

      <td class="left-header"> $119,767.68</td>

      <th class="responsive-table-cell">Step 2</th>

      <td class="left-header"> $123,066.72</td>

      <th class="responsive-table-cell">Step 3</th>

      <td class="left-header"> $126,449.28</td>

      <th class="responsive-table-cell">Step 4</th>

      <td class="left-header"> $129,936.24</td>

      <th class="responsive-table-cell">Step 5</th>

      <td class="left-header"> $137,181.60</td>

      <th class="responsive-table-cell">Step 6</th>

      <td class="left-header"> $144,844.56</td>

      <th class="responsive-table-cell">Step 7</th>

      <td class="left-header"> $152,904.24</td>

      <th class="responsive-table-cell">Step 8</th>

      <td class="left-header"> $161,423.28</td>

    </tr>

  </tbody>

</table>

edited 16 hours ago

answered yesterday

Giovan Cruz

408

edited 16 hours ago

answered yesterday

Giovan Cruz

408

answered yesterday

Giovan Cruz

408

answered yesterday

Giovan Cruz

408

what happen to my class="odd" ?
– VA DEV
yesterday

I apply your code and still it does resize the table
– VA DEV
yesterday

Man, if you need "odd" class you can append class="responsive-table-item odd". You are doing something wrong. If you run this snippet above, the code don't work? Put all inside one [codepen] (codepen.io) and send here.
– Giovan Cruz
yesterday

But, I am telling you that when you resize it wont be as a mobile view. I don't want to use the button though. Here's a codepen: codepen.io/anon/pen/pQaWrN
– VA DEV
yesterday

try to resize your browser and see if the table does shrink into mobile
– VA DEV
yesterday

|
show 2 more comments

what happen to my class="odd" ?
– VA DEV
yesterday

I apply your code and still it does resize the table
– VA DEV
yesterday

Man, if you need "odd" class you can append class="responsive-table-item odd". You are doing something wrong. If you run this snippet above, the code don't work? Put all inside one [codepen] (codepen.io) and send here.
– Giovan Cruz
yesterday

But, I am telling you that when you resize it wont be as a mobile view. I don't want to use the button though. Here's a codepen: codepen.io/anon/pen/pQaWrN
– VA DEV
yesterday

try to resize your browser and see if the table does shrink into mobile
– VA DEV
yesterday

what happen to my class="odd" ?
– VA DEV
yesterday

I apply your code and still it does resize the table
– VA DEV
yesterday

Man, if you need "odd" class you can append class="responsive-table-item odd". You are doing something wrong. If you run this snippet above, the code don't work? Put all inside one [codepen] (codepen.io) and send here.
– Giovan Cruz
yesterday

But, I am telling you that when you resize it wont be as a mobile view. I don't want to use the button though. Here's a codepen: codepen.io/anon/pen/pQaWrN
– VA DEV
yesterday

try to resize your browser and see if the table does shrink into mobile
– VA DEV
yesterday

|
show 2 more comments

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi