如何使gif照片與桌子的寬度相同？

我想使gif照片與下面的css代碼具有相同的寬度（6英寸）。如何使gif照片與桌子的寬度相同？

table { 
 
     border-collapse: collapse; 
 
    } 
 
    td { 
 
     border: 1px solid red; 
 
     width: 2in; 
 
    } 
 
    div { 
 
     text-indent: 2em; 
 
     background: url(title_bg.gif) left; 
 
     width: 6in; 
 
    }

<!DOCTYPE html5> 
 
<header> 
 
    <meta charset="utf-8" /> 
 
</header> 
 

 
<body> 
 
    <br /> 
 
    <br /> 
 

 
    <div>result</div> 
 

 
    <table> 
 
    <tr> 
 
     <td> 
 
     experiment project 
 
     </td> 
 
     <td> 
 
     unit 
 
     </td> 
 
     <td> 
 
     value 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     experiment project1 
 
     </td> 
 
     <td> 
 
     unit 
 
     </td> 
 
     <td> 
 
     value 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td> 
 
     experiment project2 
 
     </td> 
 
     <td> 
 
     unit 
 
     </td> 
 
     <td> 
 
     value 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 

 
</html>

的title_bg.gif是

的輸出如下所示：

我已設定的圖像是6，這裏有三個tds，3 * 2 = 6。
爲什麼桌子比圖片大？
如何讓他們等寬？

來源

2016-01-18 it_is_a_literature

邊框寬度相同的寬度？ –

幾乎不可能在沒有看到所有CSS的情況下回答 - 您能創建一個小提琴嗎？ –

它，因爲1px邊界和默認padding這是1px，如果你刪除邊框，使填充0那麼結果是 -

table 
 
{ 
 
    border-collapse:collapse; 
 
} 
 
td { 
 
/*border:1px solid red;*/ 
 
    background:#ccc; 
 
    width:2in; 
 
    padding:0; 
 
} 
 
div { 
 
    text-indent:2em; 
 
    background: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRn211PPwWEdhmVO4YK4y5ITrIvOUW3bWKHRMsbCZYRLdbkoYPj') left ; 
 
    width:6in; 
 
}

<div> result </div> 
 

 
<table> 
 
<tr> 
 
    <td> 
 
    experiment project 
 
    </td> 
 
    <td> 
 
    unit 
 
    </td> 
 
    <td> 
 
    value 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    experiment project1 
 
    </td> 
 
    <td> 
 
    unit 
 
    </td> 
 
    <td> 
 
    value 
 
    </td> 
 
</tr> 
 
<tr> 
 
    <td> 
 
    experiment project2 
 
    </td> 
 
    <td> 
 
    unit 
 
    </td> 
 
    <td> 
 
    value 
 
    </td> 
 
</tr> 
 
</table>

Calc()可能是有用的爲你在這個條件。

table 
{ 
    border-collapse:collapse; 
} 
td { 
    border:1px solid red; 
    background:gray; 
    width:2in; 
    padding:0; 

} 
div { 
    text-indent:2em; 
    background:url(yourimagepath.gif)left ; 
    width:calc(6in + 4px); 
}

注意： - 請參閱瀏覽器對calc（）的支持。

來源

2016-01-18 10:29:18