2015-05-13 1 views
-1

Html стол с Роу линиями скрыты

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <table border="1" style="width:100%"> 
 
    <tr> 
 
     <th>A</th> 
 
     <th>B</th> 
 
    </tr> 
 
    <tr> 
 
     <td>10</td> 
 
     <td>10</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

выше HTML данных содержит таблицу, которая имеет соответствующие строки и столбцы. Я хочу формат, в котором строки между строками должны быть скрыты, только строки столбцов и границы таблицы должны быть видимыми. Надеюсь, теперь мой вопрос ясен. Я хочу, чтобы создать таблицу, где линии между рядами должны быть скрыты

+0

То, что вы говорите, не ясно, и пожалуйста, напишите код, только то, что у вас есть, создать демо здесь [JSFiddle] (http://www.jsfiddle.net/) – divy3993

+0

Привет не в состоянии Есть у чтобы посмотреть скриншот –

+0

Нет, напишите больше. и покажите нам, что вы пробовали. –

ответ

1

Вы должны установить свойства CSS border и border-collapse на вашем теге таблицы и установите правую границу для вашего td.

table { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td { 
 
    border-right: 1px solid black; 
 
    text-align: center; 
 
    padding: 5px; 
 
}
<table> 
 
    <tr> 
 
    <td> a </td> 
 
    <td> b </td> 
 
    </tr> 
 
    <tr> 
 
    <td> c </td> 
 
    <td> d </td> 
 
    </tr> 
 
</table>

-1
<table frame="box" rules="cols"> 
    <tr> 
     <th>Month</th> 
     <th>Savings</th> 
    </tr> 
    <tr> 
     <td>January</td> 
     <td>$100</td> 
    </tr> 
</table> 
+0

Честно говоря, я попытался дать ответ так, как я знаю, чтобы решить его не что иное. – User2

2

Вы можете использовать следующий CSS:

JSFIDDLEhttps://jsfiddle.net/seadonk/uf37xzqh/3/

HTML

<table id="thetable"> 
    <tr><td>A</td><td>B</td><td>C</td></tr> 
    <tr><td>2</td><td>2</td><td>2</td></tr> 
</table> 

CSS

#thetable { 
    border: 2px solid gray; 
    background: lightgray; 
    border-spacing: 0px; 
    border-collapse: collapse; 
} 
#thetable td{ 
    border-right: 2px solid gray; 
    padding: 20px; 
} 
-1

попробовать этот

JsFieddle

HTML

<table style='border:solid' cellpadding="10" cellspacing="0"> 
    <tr> 
     <td>a</td> 
     <td>b</td> 
     <td>c</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>2</td> 
     <td>2</td> 
    </tr> 
</table> 

CSS

td{border-right:solid} 
Смежные вопросы