HTML5 CSS3 TableTag

Question

Hier ist die CSS-Datei, in der ich einige Grenze für die gesamte Tabelle anwendete.

#tableCount 
{ 
border: 1px solid gray; 
margin-left: 40px; 
} 

Hier ist die HTML-Datei wie folgt:

<table id="tableCount" style="width: 30%; height: 50%;" class="table table-striped" [mfData]="data | dataFilter : filterQuery" #mf="mfDataTable" 
        [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder"> 
       <thead> 
        <tr id="t1"> 
         <td colspan="3" style="color:white; width: 10%;">Status</td> 
         <td style="text-align:right;"> 

          <button id="buttons" (click)="addRow()" type="button" class="btn btn-default"> 
          <span style="color:black;" title="Add Row" class="glyphicon glyphicon-plus"></span> 
          </button> 
         </td> 
        </tr> 
        <tr> 
         <th style="width: 10%">S.No.</th> 
        <th style="width: 10%; color:white;"> 
          <mfDefaultSorter by="status">Status</mfDefaultSorter> 
         </th> 
         <th style="width: 10%"></th> 
         <th style="width: 10%"></th> 
       </tr> 
     </thead> 
       <tbody> 
        <tr *ngFor="let item of mf.data; let i=index"> 
         <td> 
          {{i+1}} 
         </td> 
        <td>{{item.status}}</td> 
         <td></td> 
         <td style="text-align:right;"> 
         <button id="buttons" (click)="editRow()" type="button" class="btn btn-default"> 
          <span style="color:dark grey;" title="Edit Row" class="glyphicon glyphicon-edit"></span> 
          </button> 
      <button id="buttons" (click)="deleteRow(i)" type="button" class="btn btn-default"> 
          <span style="color:red;" title="Delete Row" class="glyphicon glyphicon-trash"></span> 
          </button> 
         </td></tr> 
       </tbody> 
       <tfoot> 
        <tr style="width: 10%;"> 
         <td style="text-align:center;" colspan="5"> 
          <input id="footer" type="button" value="Submit"/> 
         </td> 
        </tr> 
       </tfoot> 
      </table> 

Warum die Grenze von der rechten Seite nicht angewendet wird, ich versucht haben, auf unterschiedliche Weise zu tun. Hier feststecken.

Jede Hilfe geschätzt, Vielen Dank im Voraus.

Answer 1

Reffer dieser Code könnte hilfreich sein, Ihr Problem hier zu lösen, ist die CSS-Datei

table.roundedCorners { 
    border: 1px solid DarkOrange; 
    border-radius: 13px; 
    border-spacing: 0; 
} 

table.roundedCorners td, 
table.roundedCorners th { 
    border-bottom: 1px solid DarkOrange; 
    padding: 10px; 
} 

table.roundedCorners tr:last-child > td { 
    border-bottom: none; 
} 

Hier wird die HTML-Datei, wie unten:

<table class="roundedCorners"> 
    <tr> 
    <th>Table Header</th> 
    <th>Table Header</th> 
    <th>Table Header</th> 
    </tr> 
    <tr> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    </tr> 
    <tr> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    </tr> 
    <tr> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    </tr> 
    <tr> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    <td>Table cell</td> 
    </tr> 
</table>