title: HTML CSS Styling table loaded from Excel file
body: <p>im having problem about the text overlapping the border.
  i just use overflow:visible in my css</p>
  
  <p>This is my HTML table.</p>
  
  <p><a href="https://i.stack.imgur.com/VRcOU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VRcOU.png" alt="enter image description here"></a></p>
  
  <p>How can i make it like this?</p>
  
  <p><a href="https://i.stack.imgur.com/54wLj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/54wLj.png" alt="enter image description here"></a></p>
  
  <p>I just want to hide the border if the text overflows..</p>
  
  <p>heres the code for the first 2 row:</p>
  
  <pre><code>&lt;div id="GridWeb1_viewPanel10" style="height: 598px; width: 100%; overflow: hidden; position: relative;"&gt;
      &lt;table id="GridWeb1_viewTable10" class="GridWeb1_3" style="width:0%;" cellpadding="0" cellspacing="0"&gt;
          &lt;colgroup&gt;
              &lt;col style="width: 14.25pt;" id="GridWeb1_!0CD10"&gt;
              &lt;col style="width: 14.25pt;" id="GridWeb1_!1CD10"&gt;
              &lt;col style="width: 14.25pt;" id="GridWeb1_!2CD10"&gt;
              &lt;col style="width: 14.25pt;" id="GridWeb1_!3CD10"&gt;
              &lt;col style="width: 14.25pt;" id="GridWeb1_!4CD10"&gt;
              &lt;col style="width: 138.75pt;" id="GridWeb1_!5CD10"&gt;
              &lt;col style="width: 93.75pt;" id="GridWeb1_!6CD10"&gt;
              &lt;col style="width: 0pt;" id="GridWeb1_!7CD10"&gt;
          &lt;/colgroup&gt;
          &lt;tbody&gt;
              &lt;tr id="GridWeb1_[d_row]9" style="height:12.75pt;"&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_0#9" class="GridWeb1_26" protected="1" align="left" valign="top"&gt;
                      &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;Residents&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_1#9" class="GridWeb1_27" protected="1" valign="top"&gt;
                      &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_2#9" class="GridWeb1_27" protected="1" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_3#9" class="GridWeb1_27" protected="1" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_4#9" class="GridWeb1_27" protected="1" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_5#9" class="GridWeb1_28" protected="1" valign="bottom"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: bottom; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td title="140150000000100000" style="-moz-user-select: none;" id="GridWeb1_6#9" class="GridWeb1_27" protected="1" align="center" valign="middle"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: middle; -moz-user-select: none;"&gt;140150000000100000&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_7#9" class="GridWeb1_28" protected="1" valign="bottom"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: bottom; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="GridWeb1_[d_row]10" style="height:12.75pt;"&gt;
                  &lt;td title="1. " style="-moz-user-select: none;" id="GridWeb1_0#10" class="GridWeb1_27" protected="1" align="right" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;1. &lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td title="Loans to Government " style="-moz-user-select: none;" id="GridWeb1_1#10" class="GridWeb1_27" protected="1" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;Loans to Government &lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td title="&lt;NULL&gt;" style="-moz-user-select: none;" id="GridWeb1_2#10" class="GridWeb1_27" protected="1" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td title="&lt;NULL&gt;" style="-moz-user-select: none;" id="GridWeb1_3#10" class="GridWeb1_27" protected="1" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td title="&lt;NULL&gt;" style="-moz-user-select: none;" id="GridWeb1_4#10" class="GridWeb1_26" protected="1" valign="top"&gt;
                       &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: top; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td title="&lt;NULL&gt;" style="-moz-user-select: none;" id="GridWeb1_5#10" class="GridWeb1_28" protected="1" valign="bottom"&gt;
                      &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: bottom; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td title="140150000500120000" style="-moz-user-select: none;" id="GridWeb1_6#10" class="GridWeb1_27" protected="1" align="center" valign="middle"&gt;
                      &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: middle; -moz-user-select: none;"&gt;140150000500120000&lt;/span&gt;
                  &lt;/td&gt;
                  &lt;td style="-moz-user-select: none;" id="GridWeb1_7#10" class="GridWeb1_28" protected="1" valign="bottom"&gt;
                      &lt;span class="acwxc" style="height: 11.75pt; display: block; vertical-align: bottom; -moz-user-select: none;"&gt;&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the only css for each span:</p>
  
  <pre><code>span.acwxc {
      height: 11.75pt; 
      display: block; 
      vertical-align: top; 
      -moz-user-select: none;
      overflow:visible !important;
  }
  </code></pre>