how to reduce border length using css?-CodePudding

I have a table with two column and 4 rows , i am trying to reduce the border length of the footer

also i want to move

     <tr>
     <tr>test</tr>
      <tr>some value</tr>
     </tr>

to the right side value should be straight line to cell1_1 below

html

<table >
  <tr>
     <tr>test</tr>
      <tr>result</tr>
  </tr>
  <tfoot>
    <tr>
      <td>foot1</td>
      <td>foot2</td>
    </tr>
   </tfoot>
   <tbody>
     <tr>
       <td>cell1_1</td>
       <td>cell2_1</td>
      </tr>
      <tr>
        <td>cell1_2</td>
        <td>cell2_2</td>
      </tr>
      <tr>
        <td>cell1_3</td>
        <td>cell2_3</td>
      </tr>
      <tr>
        <td>cell1_4</td>
        <td>cell2_4</td>
      </tr>
    </tbody>
  </table>

css

    table.greyGridTable {
    border: 2px solid #FFFFFF;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    }
    table.greyGridTable td, table.greyGridTable th {
    border: 1px solid #FFFFFF;
    padding: 3px 4px;
    }
    table.greyGridTable tbody td {
    font-size: 13px;
    }
    table.greyGridTable td:nth-child(even) {
    background: #EBEBEB;
    }
    table.greyGridTable tfoot {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    border-top: 4px solid #333333;
    }
    table.greyGridTable tfoot td {
    font-size: 14px;
    }

How to reduce the table.greyGridTable border length(marked in red)

attached fiddle link

http://jsfiddle.net/q6eapb8d/

CodePudding user response：

Please check this fiddle than you will get your answer, "https://jsfiddle.net/u7zq0amc/1/"
"https://stackoverflow.com/questions/4131490/any-way-to-limit-border-length"

CodePudding user response：

hey the border length of the footer can be reduced by reducing the px to 2

   [here is the js fiddle ][1]


   [1]: http://jsfiddle.net/04cerapb/1/