0

I have an html table that shows dynamic content from a database. The first table cell has the content rendered in a dropdown list and has the most variance in its length. The rest of the cells are pretty small and uniform. Screen looks fine in a desktop browser - problem is, when rendered in a mobile browser, it stretches the width beyond the boundary of the screen.

What is the best way using css and media queries, to cause that first table cell to line break only in a mobile view, staying inline in a desktop view?

To visualize what I'm talking about:

Desktop -

<tr>
<td><td><td><td>
</tr>

Mobile -

<tr>
<td>
<td><td><td>
</tr>

here is the pseudocode of table as it is now:

<Table id="tblLineItemsInv" Class="table" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th style="font-size:14px"> Description</th>
      <th style="width:150px; font-size:14px"> Quantity</th>
      <th style="width:150px; font-size:14px"> Amount</th>
      <th style="width:150px; font-size:14px"> Total</th>
      <th style="width:150px; font-size:14px"> Taxable</th>
      <th></th>
    </tr>
  </thead>
  <tbody style="padding-left:5px;"></tbody>
  <tfoot>
    <tr>
      <td>
        <select id="ddl1"></select>
      </td>
      <td> <input type="text" id="txtQuantityInv" /></td>
      <td> <input type="text" id="txtAmountInv" /></td>
      <td> <input type="text" id="txtTotalInv" /></td>
      <td><input type="checkbox" id="cbTaxableInv" /></td>
      <td><input type="button" id="btnAddInv" value="Add" /></td>
    </tr>
  </tfoot>
</Table>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
optionsix
  • 956
  • 1
  • 8
  • 27
  • There is no "line break" in a table. Use two tables or wrap and insert rows – mplungjan Aug 24 '20 at 15:10
  • Fair enough, "line break" was probably not the right way to word it. Whats considered best practice? If I was to use two tables, then how would I "negate" that (again not sure about the wording here) so that it doesnt render on a separate line in a desktop view. – optionsix Aug 24 '20 at 15:18
  • You should perhaps look for how to make options shorter? – mplungjan Aug 24 '20 at 15:21
  • If it is compulsory to use tables instead of `div` (preferred), Combine heading and input elements in a single `td` and make `td{display: inline-block}` this will make `td` to wrap inside `tr` when screen getting shorter and be inline in larger screens. – Liju Aug 24 '20 at 15:23

0 Answers0