如何在CSS中设置字体 - 真棒图标的样式？

Question

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.

Answer 1

Just use the Bootstrap 4 text-nowrap class to the table th...

https://jsfiddle.net/9shn3qxz/

<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 text-nowrap">Number <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="table2 text-nowrap">Table <i class="fa fa-angle-down" style="font-size: 15px;" aria-hidden="true"></i></th>
                    <th scope="col" class="status text-nowrap">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>

Answer 2

It seems as though you have two options that immediately come to mind.

1. Use a responsive table on mobile, so that the table width isn't compromised.
2. Resize your columns with media queries to a point where the name and icon's don't interfere with each other's spacing and the table is still legible.
   1. Alternatively, resize your header fonts on mobile.

Using table-responsive

Surround your table with <div class="table-responsive"> to ensure responsiveness.

Using CSS Media Queries

Since you are using Bootstrap 4, I'll keep it as "mobile-first."

th {
    font-size: 14px; // Smallest font size you want them to render
}
@media (min-width: 768px) {
    // After the screen is at least 768px wide, use larger font size
    // alter the min-width as many times as needed or appropriate
    th{
      font-size: 16px;
    }
}

This is basically what you would do inside of your CSS. Maintain the mobile view first, and build up to the larger display sizes.

Edit 2

Playing around with the styles, removing the left/right padding on .table td, .table th seemed to fix the icon issue. You might just want to work on adjusting the column padding for mobile views.

Answer 3

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> 

Answer 4

You could set a min-width of the table td and th.

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

You may have to tweak the actual value applied to min-width. This will prevent the columns from taking up less than the set width, but will not restrict the columns to take up only that amount of space.

I would also consider applying a different min-width per column since the Number column will require around 140px but the Table column only needs about 80px. This will leave more space available for the Name.

Answer 5

To fix this, you can try adding the Bootstrap 4 text-nowrap class to the table th.

OR you can edit the css property of table th to have white-space:nowrap