CODEWITHSUNDEEP
css
BKM
BKM

Reputation: 186

border-radius not being applied to <tr> row tag even after using border-collapse:separate

border radius does not apply to the row tag even after using border-collapse:separate

 <div class="table-responsive">
                <table id="tblActionListData" class="table-responsive table table-bordered table-hover" >
               <tbody>
                   <tr ng-repeat="ac in ActionComment" style="border-style:hidden">
                        <td style="border-style:dashed";border:1px solid ;border-radius:5px"  >{{ac.Comment}}</td>
                   </tr>

                <tr style="border-style:hidden">
                    <td >
                    <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
                        <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
                            Comment
                        </asp:LinkButton>
                    </td>
                </tr>
            </tbody>
        </table>


        </div>

Have used other things like border-top-left-radius:5px and so on used border-collapse:collapse as well dint work not sure why is this happening

Upvotes: 1

Views: 90

Answers (1)

Sebastian Brosch
Sebastian Brosch

Reputation: 43574

Since you are using just one column you can set the border on the <td> element directly like this (as you suggested with an edit):

<div class="table-responsive">
  <table id="tblActionListData" class="table-responsive table table-bordered table-hover">
    <tbody>
      <tr ng-repeat="ac in ActionComment">
        <td style="display:grid;border-collapse:separate;border-style:solid;border-width:1px;border-radius:5px;">{{ac.Comment}}</td>
      </tr>
      <tr style="border-style:hidden">
        <td>
          <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
          <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
          Comment
          </asp:LinkButton>
        </td>
    </tr>
    </tbody>
  </table>
</div>

For tables using multiple columns you can use the following solution to get the border on the <tr> element.

<div class="table-responsive">
  <table id="tblActionListData" class="table-responsive table table-bordered table-hover" >
    <tbody>
      <tr ng-repeat="ac in ActionComment" style="display:inline-block; border-collapse:separate; border-style:solid; border-width:1px; border-radius:5px;">
        <td style="">{{ac.Comment}}</td>
        <td style="">2nd column</td>
        <td style="">3rd column</td>
      </tr>
      <tr style="border-style:hidden">
        <td>
          <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
          <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
          Comment
          </asp:LinkButton>
        </td>
    </tr>
    </tbody>
  </table>
</div>

You can also apply the border to the <td> elements of the <tr> to get the expected border. But this only work in case there is no space (margin) between the columns.

table {
  border-spacing:0;
}
.border-tr td:first-child {
  border-left:1px solid #000;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
}
.border-tr td:last-child {
  border-right:1px solid #000;
  border-top-right-radius:5px;
  border-bottom-right-radius:5px;
}
.border-tr td {
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}
<div class="table-responsive">
  <table id="tblActionListData" class="table-responsive table table-bordered table-hover" >
    <tbody>
      <tr ng-repeat="ac in ActionComment" class="border-tr">
        <td style="">{{ac.Comment}}</td>
        <td style="">2nd column</td>
        <td style="">3rd column</td>
      </tr>
      <tr style="border-style:hidden">
        <td>
          <asp:TextBox ID="txtActionComment" ng-model="mdlActionComment" runat="server" TextMode="MultiLine" style="width:80%;border-radius:5px" Class="pull-left"/>
          <asp:LinkButton ID="lnkSaveComment" class="btn btn-primary btn-sm pull-left" style="margin-top:10px;margin-left:20px" runat="server" ng-click="SaveActionComment($index)">
          Comment
          </asp:LinkButton>
        </td>
    </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions