1

In the following HTML I'm using Bootstrap. The real display as shown in image below has two columns too far apart. How can I make them display a bit closer to each other.

NOTE: For the sake of brevity of this post, I've simplified the html a bit. The real html involves some programming code - such as foreach loop and data fetch from database etc - as that all is not related to this post.

<div class="row">
    <div class="col-md-12">
      <table class="table table-borderless table-condensed">
            <thead>
              <tr><th></th><th></th></tr>
            </thead>
             <tbody>
               <tr>
                 <td class="col-md-2">
                    <a href="some link">item1</a>
                 </td>
                 <td class="col-md-10">
                   <span>item2</span>
                 </td>
               </tr>
            </tbody>
       </table>
    </div>
</div>

Display:

enter image description here

UPDATE: If I change first column <td class="col-md-2"> to <td class="col-md-1"> and the second column <td class="col-md-10"> to <td class="col-md-11"> the content in first column gets wrapped (something I don't want since all the content in first column is of fixed length and hence it does not need to be wrapped).

Community
  • 1
  • 1
nam
  • 21,967
  • 37
  • 158
  • 332
  • I've tried your updated code and it does not wrap for me. The first column expands. Is the width of your div constrained? – TG01 Dec 02 '16 at 16:21
  • The gutter (spacing between columns in always 30px) so you'd need to customize it or not use the grid: http://stackoverflow.com/questions/19911763/how-to-adjust-gutter-in-bootstrap-3-grid-system – Carol Skelly Dec 02 '16 at 16:31

1 Answers1

1

To address your updated code with the first column changed to col-md-1, you can add text-nowrap to solve your wrapping issue:

<td class="col-md-1; text-nowrap">
TG01
  • 195
  • 2
  • 9
  • Your solution works. Is it the correct approach or there are better alternatives? – nam Dec 02 '16 at 16:45
  • Well, this is just one of many possible solutions. text-nowrap is a valid bootstrap element. I don't think it would impact performance or cause any negative rendering issues. – TG01 Dec 02 '16 at 19:30