CSS messed up in mobile view

Question

I have a simple nested table. Three columns - Name, Email,Contact. In the contact column, I have have two contact separated by a
. This table gets stacked in the form of one row below the another in the mobile view.

Problem : Since the two contact numbers are separated by a break, in the mobile view it adds a huge space between the column headings. I just want to pick up "contact" heading in mobile(and not touch the numbers) and move it a little to reduce the space in between. Right now, whatever css I apply it moves the contact numbers along with it. Please suggest how can I do this ?

$(function() {
  $(".fold-table tr.view").on("click", function() {
    $(this).toggleClass("open").next(".fold").toggleClass("open");
  });
});

$('.view, table.child').each(function() {
  $('.view:even, table.child:even').addClass('odd');
  $('.view:odd, table.child:odd').addClass('even');
});

.tableComponent table.parent {
  font-family: 'Poppins';
  font-size: 12px;
  width: 60%;
  border: none;
  border-collapse: separate;
  border-spacing: 0 2px;
}

.tableComponent table thead th {
  border-bottom: 0;
  border-top: 0;
}

.tableComponent table td,
th {
  border-top: 0px;
}

table.fold-table>tbody>tr.view td,
table.fold-table>tbody>tr.view th {
  cursor: pointer;
}

table.fold-table>tbody>tr.fold {
  display: none;
}

table.fold-table>tbody>tr.fold.open {
  display: table-row;
}

.odd {
  background-color: #F2F2F2;
}

.even {
  background-color: #F8F8F8
}

table.child {
  font-family: 'Poppins';
  font-size: 12px;
  width: 100%;
  margin-top: -0.1rem;
  border-top: 2px solid #DBDBDB;
}

table.fold-table>tbody>tr.fold.open>td {
  padding: 0;
}

@media all and (max-width: 500px) {
  .tableComponent table.parent {
    width: 90%;
    margin-left: 5vw
  }
  .tableComponent thead {
    display: none;
  }
  .tableComponent tr {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
  }
  .tableComponent td::before {
    content: attr(col);
    font-weight: bold;
    padding-right: 20px;
    width: 40vw;
    display: inline-block;
  }
  table.child {
    margin-top: -0.5rem;
  }
  .contactInfo {
    display: inline-block;
    margin-left: -0.2rem;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tableComponent">

  <table class="table fold-table parent" id="table">
    <thead>
      <tr>

        <th scope="col">Name</th>
        <th scope="col">Email</th>
        <th scope="col">Contact</th>
      </tr>
    </thead>
    <tbody>
      <tr class="view">

        <td col="Name">John</td>
        <td col="Email">j@g.com</td>
        <td col="Contact">
          <span class="contactInfo">
                            35373726<br>
                            35373726
                        </span>
        </td>
      </tr>
      <tr class="fold">
        <td colspan="3">
          <div class="fold-content">

            <table class="child">

              <tbody>
                <tr>
                  <td col="Name">SUB Data 1</td>
                  <td col="Email">SUB Data 1</td>
                  <td col="Contact">SUB Data 1

                  </td>
                </tr>

                <tr>
                  <td col="Name">SUB Data 1</td>
                  <td col="Email">SUB Data 1</td>
                  <td col="Contact">SUB Data 1

                  </td>
                </tr>

              </tbody>
            </table>
          </div>
        </td>
      </tr>

    </tbody>
  </table>
</div>

How exactly do you want it to look: do you mean you want the column headings aligned at the top? Or in the centre? Just use `vertical-align` on the inline-block — FluffyKitten, Aug 26 '20 at 14:07
Does this answer your question? [How to Vertical align elements in a div?](https://stackoverflow.com/questions/79461/how-to-vertical-align-elements-in-a-div) — FluffyKitten, Aug 26 '20 at 14:13

score 2 · Accepted Answer · answered Aug 26 '20 at 14:10

2

In css, the inline elements doesn't take margins, so vertical alignment can be done like so

@media all and (max-width: 500px){
  .tableComponent td::before {
    vertical-align: top;
  }
}

answered Aug 26 '20 at 14:10

Arbin Shrestha

155
1
7

Welcome to Stack Overflow. Your contributions are welcome, but please note that answering questions that already have been answered elsewhere on the site (like this one) is discouraged. Otherwise we are just encouraging more repetitive questions :) Please see the "Answer well-asked questions" section in [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). The correct action is link to an existing answer and to flag the question as duplicate when you have enough rep. – FluffyKitten Aug 26 '20 at 14:21
@FluffyKitten This line solved the issue. I am sorry if this is a redundant question. CSS just confuses the hell out of me. Since, you had already answered my previous question regarding this, I am asking here again (otherwise the question might be duplicate again ) In the desktop view, I am trying to to not let the row height increase on adding 2 contact numbers by adjusting line height as - table.fold-table > tbody > tr{ line-height: 10px; } but this still shows the top row has broader than the rest. What am I missing here? – HarshVardhan Bandta Aug 26 '20 at 14:52
@HarshVardhanBandta The row height has to increase so that it can fit in the 2 lines. You could put the contact numbers on one line if you want all the rows to be the same height. – FluffyKitten Aug 26 '20 at 15:18
Sadly, that is not an option. It is a client requirement. Is there any way to handle this? – HarshVardhan Bandta Aug 26 '20 at 15:35
@HarshVardhanBandta Forget about the code for a minute. Think about it logically first - how do you want it to look? Make all the rows the same height (and therefore rows with just 1 line will have more space)? If you tell us how you want it to look, we can help you do that, but we don't know how you want to handle this so we don't know *how* to help! – FluffyKitten Aug 26 '20 at 15:53
I want all the rows to be of the SAME height. I don't want the first row to expand because of the
. And the problem is, not all rows will have two contacts. I don't want to set line height separately for each tr which has two contacts.So, I was wondering if there is some command or class that I don't know and could use here ! – HarshVardhan Bandta Aug 26 '20 at 16:03
1

@HarshVardhanBandta You have plenty of options depending upon your preference: 1. Hide the overflowing characters by using **text-overflow: ellipsis;** 2. Wrap the numbers in div and give the div **overflow:auto;** and **max-height** property.This will create a scrollbar with fixed td height while not hiding the data. 3. Remove the **br** tag and use commas instead 4. Decrease the font size and line-height of the contact numbers to fit the numbers in the td. 5. Let it be the way it is, it shouldnt look too bad. – Arbin Shrestha Aug 26 '20 at 16:16
@ArbinShrestha Ok. So, the catch is - 1. Of all the methods suggested, I can use only line height method(4) which works perfectly but since it collapses the content the space in between the contact numbers also goes away. 2. I removed padding from the col="Contact" instead and this fixed the issue , too but then it applies to ALL the and I only want it to be applied wherever I have two contacts numbers in my real application. – HarshVardhan Bandta Aug 26 '20 at 16:49

score 1 · Answer 2 · answered Aug 26 '20 at 14:08

1

If you change the col="Contact" td into a flexbox, it will behave the way you want it at that screen size.

[col="Contact"] {
    display: flex;
}

answered Aug 26 '20 at 14:08

Dan Mullin

4,285
2
18
34

Dan, you're a long-time user of Stack Overflow... you should know better than answering questions that have already been answered dozens of times here :) – FluffyKitten Aug 26 '20 at 14:21
True. This seemed more like a debugging issue. I'll delete my answer if you think it's in bad form :) – Dan Mullin Aug 26 '20 at 14:22
That's up to you, but in future its better to flag questions like this as duplicates - otherwise we are just encouraging more and more of the same questions :) Even with debugging questions, there is still an onus on the OP to do some work, this isn't a debugging site - the purpose of the SO is a Q&A repository. So if in doubt, think about whether the question has any value for *future* users, or if pointing them to an existing answer (that may even offer multiple ways to do it) is more useful. (In this case it is definitely option 2 :) ) – FluffyKitten Aug 26 '20 at 14:30
Duly noted. I'll get rid of this one and keep this conversation in mind in the future. I appreciate people like you more than you think :) – Dan Mullin Aug 26 '20 at 14:31

CSS messed up in mobile view

2 Answers2