Html таблица tr внутри td

Я пытаюсь создать таблицу в HTML. У меня есть следующий дизайн для создания. Я добавил <tr> внутри <td> но почему-то таблица не создается в соответствии с дизайном.



enter image description here



может ли кто-нибудь предложить мне, как я могу этого достичь?



Я не могу создать разделы Name1 / Price1.

766   9  

9 ответов:

вы должны добавить полную таблицу внутри td 

    <table>
      <tr>
        <td>
          <table>
            <tr>
              <td>
                ...
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
115  
2016-09-22 17:09:37

помещение таблицы в таблицу является полностью недопустимым подходом. Кроме того, вы не можете поместить tr внутри td. Вы должны использовать colspan и rowspan. Проверьте это скрипка.

HTML:

<table width="100%">
 <tr>
  <td>Name 1</td>
  <td>Name 2</td>
  <td colspan="2">Name 3</td>
  <td>Name 4</td>
 </tr>

 <tr>
  <td rowspan="3">ITEM 1</td>
  <td rowspan="3">ITEM 2</td>
  <td>name1</td>
  <td>price1</td>
  <td rowspan="3">ITEM 4</td>
 </tr>

 <tr>
  <td>name2</td>
  <td>price2</td>
 </tr>
 <tr>
  <td>name3</td>
  <td>price3/td>
 </tr>
</table>

и некоторые CSS:

table {
    border-collapse: collapse       
}

td {
   border: 1px solid #000000
}
30  
2017-09-05 09:11:17

вы можете решить без столик.

        <table border="1">
            <thead>
                <tr>
                    <th>ABC</th>
                    <th>ABC</th>
                    <th colspan="2">ABC</th>
                    <th>ABC</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td rowspan="4">Item1</td>
                    <td rowspan="4">Item1</td>
                    <td colspan="2">Item1</td>
                    <td rowspan="4">Item1</td>
                </tr>
                <tr>
                    <td>Name1</td>
                    <td>Price1</td>
                </tr>
                <tr>
                    <td>Name2</td>
                    <td>Price2</td>
                </tr>
                <tr>
                    <td>Name3</td>
                    <td>Price3</td>
                </tr>
                <tr>
                    <td>Item2</td>
                    <td>Item2</td>
                    <td colspan="2">Item2</td>
                    <td>Item2</td>
                </tr>
            </tbody>
        </table>
10  
2017-12-18 10:56:34

попробуйте этот код

<table border="1" width="100%">
<tr>
    <td>Name 1</td>
    <td>Name 2</td>
    <td colspan="2">Name 3</td>
    <td>Name 4</td>
</tr>

<tr>
    <td rowspan="3">ITEM 1</td>
    <td rowspan="3">ITEM 2</td>
    <td>name</td>
    <td>price</td>
    <td rowspan="3">ITEM 4</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
<tr>
    <td>name</td>
    <td>price</td>
</tr>
</table>
5  
2015-05-28 17:11:54

поместите другую таблицу внутри элемента td, например этой.

<table>
    <tr>
        ...
    </tr>
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>
            <table>
                <tr>
                    <td>name1</td>
                    <td>price1</td>
                </tr>
...
            </table>
        </td>
        <td>ABC</td>
    </tr>
...
</table>
3  
2013-06-13 17:01:00

Полный Пример: 

   <table border="1" style="width:100%;">
        <tr>
            <td>ABC</td>
            <td>ABC</td>
            <td>ABC</td>    
                    <td>ABC</td>
        </tr>
        <tr>
            <td>Item 1</td>
            <td>Item 1</td>
            <td><table border="1" style="width: 100%;">
                <tr><td>Name 1</td><td>Price 1</td></tr>
                                <tr><td>Name 2</td><td>Price 2</td></tr>
                <tr><td>Name 3</td><td>Price 3</td></tr>
                </table></td>   
            <td>Item 1</td>
        </tr>
        <tr>
            <td>Item 2</td>
            <td>Item 2</td>
            <td>Item 2</td> 
                    <td>Item 2</td>
        </tr>
        <tr>
            <td>Item 3</td>
            <td>Item 3</td>
            <td>Item 3</td> 
                    <td>Item 3</td>
        </tr>
    </table>
2  
2013-06-13 17:19:13

просто добавьте новый table на td вы хотите. Пример: http://jsfiddle.net/AbE3Q/

<table border="1">
    <tr>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
        <td>ABC</td>
    </tr>
    <tr>
        <td>Item1</td>
        <td>Item2</td>
        <td><table border="1">
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            <tr><td>qweqwewe</td><td>qweqwewe</td></tr>
            </table></td>
        <td>Item3</td>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>
    <tr>
    </tr>  
</table>
2  
2014-05-12 20:37:16

вы можете проверить это.просто используйте таблицу внутри таблицы, как это

    <!DOCTYPE html>
    <html>
    <head>
    <style>
     table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
       }
   </style>
   </head>
   <body>

     <table style="width:100%">
        <tr>
          <th>ABC</th>
          <th>ABC</th> 
          <th>ABC</th>
          <th>ABC</th>
       </tr>
       <tr>
         <td>Item1</td>
         <td>Item1</td>
         <td>
           <table style="width:100%">
             <tr>
                <td>name1</td>
                <td>price1</td>
             </tr>
             <tr>
                <td>name2</td>
                <td>price2</td>
             </tr>
             <tr>
                <td>name3</td>
                <td>price3</td>
             </tr>
          </table>
       </td>
       <td>item1</td>
     </tr>
     <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
     </tr>
     <tr>
        <td>E</td>
        <td>F</td>
        <td>G</td>
        <td>H</td>
     </tr>
     <tr>
      <td>E</td>
      <td>R</td>
      <td>T</td>
      <td>T</td>
     </tr>

   </table>

  </body>
  </html>
1  
2018-04-05 11:43:57 
<table border="1px;" width="100%" >
        <tr align="center">
            <td>Product</td>
            <td>quantity</td>
            <td>Price</td>
            <td>Totall</td>
        </tr>
        <tr align="center">
            <td>Item-1</td>
            <td>Item-1</td>
            <td>
                <table border="1px;" width="100%">
                    <tr align="center">
                        <td>Name1</td>
                        <td>Price1</td>
                    </tr>
                    <tr align="center">
                        <td>Name2</td>
                        <td>Price2</td>
                    </tr>
                    <tr align="center">
                        <td>Name3</td>
                        <td>Price3</td>
                    </tr>
                    <tr>
                        <td>Name4</td>
                        <td>Price4</td>
                    </tr>
                </table>
            </td>
            <td>Item-1</td>
        </tr>
        <tr align="center">
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
            <td>Item-2</td>
        </tr>
        <tr align="center">
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
            <td>Item-3</td>
        </tr>
    </table>
-1  
2017-11-08 21:04:07

Comments

    Ничего не найдено.
Click here to cancel reply.