title: Why is CSS style for table TD:last-of-type unwantedly triggered in IE depending on the TD's content?
body: <p>I'm facing a display problem which happens only with IE.
  I defined a class in CSS for "table with rounded corners" (means the TD at each of its corners, not all or random TD).
  I defined a form, actually several small forms, with basic functions such as Delete or Modify the table entry.
  The table and related included forms are built by PHP.</p>
  
  <p>See screenshots (IE, FF, CR) : <a href="https://imgur.com/a/idAsO6H" rel="nofollow noreferrer">https://imgur.com/a/idAsO6H</a></p>
  
  <p>IE uses the CSS which is intended for the bottom-right table corner for each TD with a submit button, which is unintended. This seems to depend on the TD's content.</p>
  
  <p>I already confirmed below :</p>
  
  <ul>
  <li><p>Firefox and Chrome work perfectly fine regardless of the TD's content, so I can say it is narrowed down to IE only.</p></li>
  <li><p>This unwanted behavior happens with attached HTML code, so I can say it is not a server-side issue.</p></li>
  <li><p>I already tried to put the  tag outside of the TD, it did not change the behavior.</p></li>
  <li><p>When the TD's content is just text (text), there is no problem.</p></li>
  <li><p>When the TD's content is either a button or input type submit ( or ), the issue happens.</p></li>
  <li><p>I can tell that this is below CSS line which is triggered unwantedly, because I changed the radius in this styling block only, to be sure :</p>
  
  <p>table.rounded   tbody tr:last-of-type td:last-of-type</p></li>
  </ul>
  
  <p>Now I share relevant HTML and CSS codes.</p>
  
  <p>HTML code :
      </p>
  
  <pre><code>&lt;html class="no-js" lang="en"&gt;
  
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;link type="text/css" rel="stylesheet" href="../style.css"&gt;             
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;section&gt;
              &lt;h1&gt;Site Administration&lt;/h1&gt;
  
              &lt;h2&gt;Classes' Schedule&lt;/h2&gt;
  
  &lt;table class="rounded"&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Monday&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;19:00 - 22:00&lt;/td&gt;
              &lt;td&gt;Rugby&lt;/td&gt;
              &lt;td&gt;teacher 1, teacher 2&lt;/td&gt;
              &lt;td&gt;&lt;form method="post" action="admin.php"&gt;
              &lt;button type="submit" name="class_to_delete" value="1"&gt;Delete&lt;/button&gt;
              &lt;/form&gt;&lt;/td&gt;
              &lt;td&gt;&lt;form method="post" action="admin.php"&gt;
              Modify&lt;/form&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Tuesday&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;19:00 - 22:00&lt;/td&gt;
              &lt;td&gt;Soccer&lt;/td&gt;
              &lt;td&gt;teacher 3, teacher 4&lt;/td&gt;
              &lt;td&gt;&lt;form method="post" action="admin.php"&gt;
              &lt;button type="submit" name="class_to_delete" value="2"&gt;Delete&lt;/button&gt;
              &lt;/form&gt;&lt;/td&gt;
              &lt;td&gt;&lt;form method="post" action="admin.php"&gt;
              Modify&lt;/form&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;strong&gt;Friday&lt;/strong&gt;&lt;/td&gt;
              &lt;td&gt;19:00 - 22:00&lt;/td&gt;
              &lt;td colspan=2&gt;Description of regular events&lt;/td&gt;
              &lt;td&gt;&lt;form method="post" action="admin.php"&gt;
              &lt;button type="submit" name="class_to_delete" value="14"&gt;Delete&lt;/button&gt;
              &lt;/form&gt;&lt;/td&gt;
              &lt;td&gt;&lt;form method="post" action="admin.php"&gt;
              Modify&lt;/form&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;caption&gt;List of Classes&lt;/caption&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th class="centered"&gt;Day&lt;/th&gt;
              &lt;th class="centered"&gt;Hours&lt;/th&gt;
              &lt;th class="centered"&gt;Sport&lt;/th&gt;
              &lt;th class="centered"&gt;Teachers&lt;/th&gt;
              &lt;th&gt;Del.&lt;/th&gt;
              &lt;th&gt;Modif.&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  
          &lt;/section&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS code :</p>
  
  <pre><code>table.rounded   thead th:first-of-type  { /* 10px 0 0 0 : Top Left, for table with min 2 columns */
          -webkit-border-top-left-radius:     10px;
          -moz-border-radius-topleft:         10px; 
          border-top-left-radius:             10px;
          }
  
  table.rounded   thead th:last-of-type  { /* 0 10px 0 0 : Top Right, for table with min 2 columns */
          -webkit-border-top-right-radius:    10px;
          -moz-border-radius-topright:        10px; 
          border-top-right-radius:            10px;
          }
  
  table.rounded   tbody tr:last-of-type td:last-of-type  { /* 0 0 10px 0 : Bottom Right, for table with min 2 columns */
          -webkit-border-bottom-right-radius: 10px;
          -moz-border-radius-bottomright:     10px; 
          border-bottom-right-radius:         10px;
          }
  
  table.rounded   tbody tr:last-of-type td:first-of-type { /* 0 0 0 10px : Bottom Left, for table with min 2 columns */
          -webkit-border-bottom-left-radius:  10px;
          -moz-border-radius-bottomleft:      10px; 
          border-bottom-left-radius:          10px;
          }
  
  /* - borders */
  table.rounded  {
          border-collapse: separate;
          }
  
  table.rounded  tr {
          border: 0px;
          }
  
  table.rounded   th, 
  table.rounded   td {
          border-top:    1px solid black;
          border-bottom: 0px;
          border-left:   0px;
          border-right:  1px solid black;
          }
  
  table.rounded   th:first-of-type,
  table.rounded   td:first-of-type {
          border-left:   1px solid black;
          }
  
  table.rounded   tr:last-of-type td {
          border-bottom: 1px solid black;
          }
  
  table.rounded   td.afterrowspan {  /* follows in next tr, after the tr including the td which has rowspan defined */
          border-left:   0px;
          }
  
  /* - corners [same as above] */
  
  section table {
          float: center;
  
          max-width:  90%;
  
          margin-top:     10px;
          margin-bottom:  5px;
          margin-left:    auto; /* centers the table horizontally */
          margin-right:   auto; /* centers the table horizontally */
  
          /*border: 1px solid black;*/
          border-collapse: collapse; /* does not work with property Radius */
          border-spacing: 0px;
          }
  
  section table th,
  section table td {
          color:              #000000; /* Black */
          font-size: 16px;
  
          /* min-width: 150px; */
  
          margin: 5px 0px 3px 0px;
          padding-top:    4px;
          padding-bottom: 4px;
          padding-left:   5px;
          padding-right:  5px;
  
          border: 1px solid black;
          -webkit-border-radius:  0px;/*Safari,Opera,Chrome*/ 
          -moz-border-radius:     0px; 
          border-radius:          0px;
  
          vertical-align: middle;
          text-align: left;
          }
  </code></pre>
  
  <p>What I need your kind help for, is :</p>
  
  <ol>
  <li><p>Understand the root cause of this unwanted behavior in IE</p></li>
  <li><p>Find a hack or workaround for IE, using only HTML and CSS (no JS or any other addition).</p></li>
  </ol>
  
  <p>Thanks a lot for your support!</p>