Табличка с таблицей HTML с плавающей точкой справа от таблицы

Question

Как я могу поместить надпись таблицы справа от ее таблицы? Надпись должна появиться справа от стола и выстроена вверх в верхней части таблицы.

Код ниже помещает подпись в первый столбец таблицы.

table > caption { 
 
    color: red; 
 
    display: block; 
 
    float: right; 
 
    clear: right; 
 
}

<table> 
 
    <caption>This is a table caption</caption> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col">Value</th> 
 
     <th scope="col">Text</th> 
 
     <th scope="col">Numbers</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>value 1</td> 
 
     <td>Nam a sapien.</td> 
 
     <td>1.23</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>value 2</td> 
 
     <td>Nunc rutrum turpis sed pede.</td> 
 
     <td>34.56</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

Вы не можете действительно сделать внутренний-элемент поплавок из его контейнера, но вы можете сделать некоторые CSS магии с позиционированием :)

Проверьте этот пример:

table { 
 
    position: relative; 
 
} 
 
table > caption { 
 
    color: red; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    transform: translateX(100%); 
 
}

<table> 
 
    <caption>This is a table caption</caption> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col">Value</th> 
 
     <th scope="col">Text</th> 
 
     <th scope="col">Numbers</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>value 1</td> 
 
     <td>Nam a sapien.</td> 
 
     <td>1.23</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>value 2</td> 
 
     <td>Nunc rutrum turpis sed pede.</td> 
 
     <td>34.56</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Проверено в хром/Firefox/ie11

А вот объяснение того, что я там делал:

1. Убедитесь, что таблица является положение, так что я могу поставить подпись в известное положение.
2. Поместите подпись абсолютно на стол - в верхнем правом углу.
3. Переместите надпись 100% (от ее ширины) вправо (используя translateX(100%)).

Answer 2

OOps! Я думал, что OP хочет вертикальную область <caption>. О, хорошо, я оставлю это здесь на всякий случай, если кто-то хочет вертикаль <caption>. Он вращается на 90%, поэтому становится сложным с его позиционированием. <caption> настроен на white-space:nowrap, потому что две или несколько линий отбрасывают все. transform-origin: right bottom был сложным, TBH Я не полностью его понимаю, все, что я знаю, это использовать, если используется transform, и результаты почти отсутствуют, но не совсем. Как уже упоминал Dekel, position:absolute необходим на <caption> и relative на <table>.

SNIPPET

table { 
 
    position:relative; 
 
    border: 1px solid grey; 
 
} 
 
table > caption { 
 
    color: red; 
 
    transform-origin: right bottom; 
 
    transform: rotate(90deg); 
 
    white-space: nowrap; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom:-130px; 
 
    padding:0 0 0 40px; 
 
}

<table> 
 
    <caption>This is a table caption</caption> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col">Value</th> 
 
     <th scope="col">Text</th> 
 
     <th scope="col">Numbers</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>value 1</td> 
 
     <td>Nam a sapien.</td> 
 
     <td>1.23</td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>value 2</td> 
 
     <td>Nunc rutrum turpis sed pede.</td> 
 
     <td>34.56</td> 
 
    </tr> 
 
    </tbody> 
 
</table>