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

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 Nov 21 '18 at 16:52

VA DEV

2412

add a comment |

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 Nov 21 '18 at 16:52

VA DEV

2412

add a comment |

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 Nov 21 '18 at 16:52

VA DEV

2412

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 Nov 21 '18 at 16:52

VA DEV

2412

asked Nov 21 '18 at 16:52

VA DEV

2412

asked Nov 21 '18 at 16:52

VA DEV

2412

asked Nov 21 '18 at 16:52

VA DEV

2412

asked Nov 21 '18 at 16:52

VA DEV

2412

add a comment |

3 Answers
3

active

oldest

votes

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 Nov 22 '18 at 11:20

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

what happen to my class="odd" ?

– VA DEV
Nov 21 '18 at 19:19

I apply your code and still it does resize the table

– VA DEV
Nov 21 '18 at 19:34

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
Nov 21 '18 at 19:38

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
Nov 21 '18 at 20:30

try to resize your browser and see if the table does shrink into mobile

– VA DEV
Nov 21 '18 at 20:32

|
show 2 more comments

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 Nov 21 '18 at 17:28

digiwavez

213

add a comment |

Have your tried this instead:

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

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

I don't want to use a scrollbar - though.

– VA DEV
Nov 21 '18 at 16:59

and is not being responsive anyhow.

– VA DEV
Nov 21 '18 at 17:01

you still need table { width: 100% } CSS property

– Denis Kovzelyuk
Nov 21 '18 at 17:03

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

– Denis Kovzelyuk
Nov 21 '18 at 17:05

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

– VA DEV
Nov 21 '18 at 17:07

|
show 3 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',
autoActivateHeartbeat: false,
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

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 Nov 22 '18 at 11:20

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

what happen to my class="odd" ?

– VA DEV
Nov 21 '18 at 19:19

I apply your code and still it does resize the table

– VA DEV
Nov 21 '18 at 19:34

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
Nov 21 '18 at 19:38

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
Nov 21 '18 at 20:30

try to resize your browser and see if the table does shrink into mobile

– VA DEV
Nov 21 '18 at 20:32

|
show 2 more comments

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 Nov 22 '18 at 11:20

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

what happen to my class="odd" ?

– VA DEV
Nov 21 '18 at 19:19

I apply your code and still it does resize the table

– VA DEV
Nov 21 '18 at 19:34

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
Nov 21 '18 at 19:38

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
Nov 21 '18 at 20:30

try to resize your browser and see if the table does shrink into mobile

– VA DEV
Nov 21 '18 at 20:32

|
show 2 more comments

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 Nov 22 '18 at 11:20

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

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 Nov 22 '18 at 11:20

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

edited Nov 22 '18 at 11:20

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

answered Nov 21 '18 at 18:20

Giovan Cruz

10912

what happen to my class="odd" ?

– VA DEV
Nov 21 '18 at 19:19

I apply your code and still it does resize the table

– VA DEV
Nov 21 '18 at 19:34

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
Nov 21 '18 at 19:38

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
Nov 21 '18 at 20:30

try to resize your browser and see if the table does shrink into mobile

– VA DEV
Nov 21 '18 at 20:32

|
show 2 more comments

what happen to my class="odd" ?

– VA DEV
Nov 21 '18 at 19:19

I apply your code and still it does resize the table

– VA DEV
Nov 21 '18 at 19:34

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
Nov 21 '18 at 19:38

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
Nov 21 '18 at 20:30

try to resize your browser and see if the table does shrink into mobile

– VA DEV
Nov 21 '18 at 20:32

what happen to my class="odd" ?

– VA DEV
Nov 21 '18 at 19:19

I apply your code and still it does resize the table

– VA DEV
Nov 21 '18 at 19:34

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
Nov 21 '18 at 19:38

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
Nov 21 '18 at 20:30

try to resize your browser and see if the table does shrink into mobile

– VA DEV
Nov 21 '18 at 20:32

|
show 2 more comments

answered Nov 21 '18 at 17:28

digiwavez

213

add a comment |

answered Nov 21 '18 at 17:28

digiwavez

213

add a comment |

answered Nov 21 '18 at 17:28

digiwavez

213

answered Nov 21 '18 at 17:28

digiwavez

213

answered Nov 21 '18 at 17:28

digiwavez

213

answered Nov 21 '18 at 17:28

digiwavez

213

answered Nov 21 '18 at 17:28

digiwavez

213

add a comment |

Have your tried this instead:

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

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

I don't want to use a scrollbar - though.

– VA DEV
Nov 21 '18 at 16:59

and is not being responsive anyhow.

– VA DEV
Nov 21 '18 at 17:01

you still need table { width: 100% } CSS property

– Denis Kovzelyuk
Nov 21 '18 at 17:03

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

– Denis Kovzelyuk
Nov 21 '18 at 17:05

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

– VA DEV
Nov 21 '18 at 17:07

|
show 3 more comments

Have your tried this instead:

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

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

I don't want to use a scrollbar - though.

– VA DEV
Nov 21 '18 at 16:59

and is not being responsive anyhow.

– VA DEV
Nov 21 '18 at 17:01

you still need table { width: 100% } CSS property

– Denis Kovzelyuk
Nov 21 '18 at 17:03

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

– Denis Kovzelyuk
Nov 21 '18 at 17:05

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

– VA DEV
Nov 21 '18 at 17:07

|
show 3 more comments

Have your tried this instead:

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

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

Have your tried this instead:

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

   <table>

     ...

   </table>

</div>

and get rid of other CSS

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

answered Nov 21 '18 at 16:59

Denis Kovzelyuk

716

I don't want to use a scrollbar - though.

– VA DEV
Nov 21 '18 at 16:59

and is not being responsive anyhow.

– VA DEV
Nov 21 '18 at 17:01

you still need table { width: 100% } CSS property

– Denis Kovzelyuk
Nov 21 '18 at 17:03

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

– Denis Kovzelyuk
Nov 21 '18 at 17:05

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

– VA DEV
Nov 21 '18 at 17:07

|
show 3 more comments

I don't want to use a scrollbar - though.

– VA DEV
Nov 21 '18 at 16:59

and is not being responsive anyhow.

– VA DEV
Nov 21 '18 at 17:01

you still need table { width: 100% } CSS property

– Denis Kovzelyuk
Nov 21 '18 at 17:03

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

– Denis Kovzelyuk
Nov 21 '18 at 17:05

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

– VA DEV
Nov 21 '18 at 17:07

I don't want to use a scrollbar - though.

– VA DEV
Nov 21 '18 at 16:59

and is not being responsive anyhow.

– VA DEV
Nov 21 '18 at 17:01

you still need table { width: 100% } CSS property

– Denis Kovzelyuk
Nov 21 '18 at 17:03

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

– Denis Kovzelyuk
Nov 21 '18 at 17:05

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

– VA DEV
Nov 21 '18 at 17:07

|
show 3 more comments

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

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

搜尋此網誌

Argthtjtr