html css bootstrap-4 font-awesome fiddle

How to style font-awesome icons in css?

I have a screenshot below which I have replicated in HTML/CSS. The design is exactly the same both for mobile and desktop view. In the design, the angle dropdown font-awesome icons (marked with arrow in the screenshot) are aligned properly with the headings which is not the case in my design in mobile view.

1st Image:

I have created the fiddle for the above screenshot. For some reasons, I am not seeing the mobile view in the fiddle (Is there any way we can enable mobile view in the fiddle?). The snippets of HTML code which I have used in the fiddle is:

<tr>
    <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
    <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
</tr>

On mobile view (as shown below in the screenshot) on my pc, I am seeing the Number and Table headings over the angle dropdown icon.

2nd Image:

Problem Statement:

I am wondering what changes I need to make in the fiddle so that Number and Table headings are aligned with the angle dropdown font-awesome icon (marked by arrow in the 1st image) in the mobile view.

For some reasons, I am not able to see the mobile view in the fiddle.

Solution

The easiest way to do this will be to add white-space:nowrap to the th, so that the words won't get splitted up. You should however add some responsiveness to the table.

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
  white-space: nowrap;
}

.table td.left {
  padding-right: 32%;
}

.dropdown a {
  color: #676767;
  font-weight: bold;
  font-size: 14px;
}

.dropdown li {
  padding-left: 20px;
}

.dropdown li:hover {
  background-color: #EDEDED;
}

.body-manage-attendees {
  width: 100% !important;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unapid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #10314C;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  margin-right: 5%;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.square.white {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  background-color: white;
  height: 15px;
  margin-right: 10%;
  width: 15px;
  vertical-align: middle;
}

.right-itemswaiting span {
  vertical-align: middle;
  padding-left: 1%;
}

.table td,
.table th {
  border-top: none! important;
  padding-left: 3%;
}

.table thead th {
  border-bottom: none! important;
}

.table td.left {
  padding-right: 32%;
}

.right-itemswaiting {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.right-itemsreceived {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

.body-manage-attendees tbody tr:hover {
  background-color: #EDEDED;
}

.body-manage-attendees .number {
  padding-left: 2%;
  padding-right: 6%;
}

.body-manage-attendees .table1 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .table2 {
  padding-left: 1%;
  text-align: center;
  padding-right: 6%;
}

.body-manage-attendees .status {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right {
  padding-left: 1%;
  text-align: center;
}

.body-manage-attendees .right-bill {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
  padding-left: 1%;
  text-align: center;
  border: 1px solid white;
  color: black;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  text-align: center;
  border: 1px solid white;
  background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
  padding-left: 1%;
  color: white;
  text-align: center;
  background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
  padding-left: 1%;
  text-align: center;
  color: white;
  border: 1px solid white;
  background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
  padding-left: 1%;
  color: white;
  background-color: #1173B7;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="table-responsive body-manage-attendees">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Name <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="number">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="table2">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
        <th scope="col" class="status">Status <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="left">Amanda Doe</td>
        <td class="number1">250</td>
        <td class="table1">2</td>
        <td class="right-bill">Bill</td>
      </tr>
      <tr>
        <td class="left">Andy Doe</td>
        <td class="number1">14</td>
        <td class="table1">1</td>
        <td class="right-bill">Bill</td>
      </tr>

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