CSS - Alinhamento de tabelas dentro de tabelas

Front-end
#1

E aí, galera do GUJ! Tudo bem?
Tô com uma dúvida com CSS aqui que tá matando a pau minha aplicação… rs

Bom, meu cenário é o seguinte: exibir os horários que o funcionário bateu o ponto e quais as ocorrências geradas nesse dia.
Bom, eu tenho uma tabela que exibe qual a data e qual o horário que ele bateu o ponto neste dia. A cada registro desse, eu tenho uma tabela dentro da linha para representar as ocorrências deste mesmo dia.

Bom, colocarei anexas ao tópico duas imagens representando o resultado que quero.
Se puderem me dar uma força, ficaria grato! Abraços!!



#2

Up!

#3

já fez alguma coisa? mostre-nos o código.

#4

O código de gerar as tabelas já tá bonitinho; meu problema é como usar CSS para alinhar isso, entende?

Aliás, o meu código é ASP.NET, então creio que alguns não entenderiam, mas como você pediu, lá vai:

<asp:GridView ID="gridviewApuracoes" runat="server" GridLines="Horizontal">
                
                <Columns>

                    <!-- 
                      Cada TemplateField equivale a uma coluna
                       -->

                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="checkboxApuracao" />
                        </ItemTemplate>
                        <ControlStyle Width="10%" />
                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Data da apuração">
                        <ItemTemplate>
                            <asp:Label runat="server" ID="labelDataApuracao" Text="#"></asp:Label>    
                            <asp:Label runat="server" ID="labelHorarioFuncionario" Text="#"></asp:Label>
                            <br />
                            <br />
                              
                            &lt;!-- 
                               Aqui vem a minha outra "Table", que, no caso, é uma GridView. Meu problema é em 
                               alinhá-la dentro da GridView (Table) mãe, à direita.                               
                               --&gt;
                            &lt;asp:GridView runat="server" ID="gridviewOcorrencias" GridLines="None"&gt;
                                 &lt;Columns&gt;
                                    &lt;asp:TemplateField&gt;
                                        &lt;ItemTemplate&gt;
                                            &lt;asp:Label runat="server" ID="labelNomeOcorrencia" Text="#" /&gt;
                                        &lt;/ItemTemplate&gt;
                                    &lt;/asp:TemplateField&gt;

                                    &lt;asp:TemplateField&gt;
                                        &lt;ItemTemplate&gt;
                                            &lt;asp:Label runat="server" ID="labelQtdeHoras" Text="#" /&gt;
                                        &lt;/ItemTemplate&gt;
                                    &lt;/asp:TemplateField&gt;
                                  
                                &lt;/Columns&gt;
                            &lt;/asp:GridView&gt;

                        &lt;/ItemTemplate&gt;
                    &lt;/asp:TemplateField&gt;
                &lt;/Columns&gt;
            &lt;/asp:GridView&gt;
#5

acho que não fui claro. quis dizer HTML, quando disse código.

#6

Este é o pseudo-HTML [vamos chamar assim] do ASP.NET.

o <asp:GridView> do ASP.NET equivale ao <table> do HTML.
o <asp:TemplateField> do ASP.NET equivale aos <td> e <tr> do HTML.

Trocando seis por meia dúzia, o código HTML ficaria algo como:

&lt;table&gt;
        &lt;tr&gt;
            &lt;td&gt;&lt;input type="checkbox" /&gt;&lt;/td&gt;
        	&lt;td colspan="2"&gt;01/05/2011 -  08:00  11:59  13:02  17:10&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
        	&lt;td&gt;&lt;/td&gt;
            &lt;td&gt;
            	&lt;table&gt;
                	&lt;tr&gt;
                    	&lt;td &gt;Ocorrência 1&lt;/td&gt;
                        &lt;td&gt;00:40min&lt;/td&gt;
                    &lt;/tr&gt;
                    
                    &lt;tr&gt;
                    	&lt;td &gt;Ocorrência 2&lt;/td&gt;
                        &lt;td&gt;00:15min&lt;/td&gt;
                    &lt;/tr&gt;
                    
                &lt;/table&gt;
            &lt;/td&gt;
        &lt;/tr&gt;        
    &lt;/table&gt;

O problema em questão é: como eu consigo alinhar essa table de dentro à direita da coluna de cima?
A linha com a checkbox fica alinhada à esquerda e a tabela com as ocorrências fica alinhada, dentro da sua <td>, à direita.
Não tô conseguindo fazer isso…

#7

mais ou menos assim:

[code]<style type=“text/css”>
.apontamentos {
border-collapse: collapse;
width: 400px;
}

.data {
	border: #000 1px solid;
	padding: 10px;
	text-align: center;
	width: 100px;
}

.apontamento {
	border: #000 1px solid;
	padding: 10px;
}

.ocorrencias {
	border: #000 1px solid;
	padding: 10px
}

.ocorrencias-table { /* trocar por um nome melhor */
	border-collapse: collapse
}

.observacao {
	font-weight: bold;
	padding-left: 50px;
	width: 250px
}

.verde {
	color: green
}

.vermelho {
	color: red
}

</style>

<table class=“apontamentos”>
<tr>
<td class=“data”>01/05/2011</td>
<td class=“apontamento”>08:00 11:59 13:02 17:10</td>
</tr>
<tr>
<td></td>
<td class=“ocorrencias”>
<table class=“ocorrencias-table”>
<tr>
<td class=“observacao”>Uma ocorrência</td>
<td class=“verde”>00:40min</td>
</tr>
<tr>
<td class=“observacao”>Outra ocorrência</td>
<td class=“vermelho”>00:15min</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=“data”>01/05/2011</td>
<td class=“apontamento”>08:00 11:59 13:02 17:10</td>
</tr>
<tr>
<td></td>
<td class=“ocorrencias”>
<table class=“ocorrencias-table”>
<tr>
<td class=“observacao”>Uma ocorrência</td>
<td class=“verde”>00:40min</td>
</tr>
</table>
</td>
</tr>
</table>[/code]
note que alterei um pouco a estrutura da tabela para facilitar a criação do estilo.

#8

wbds, valeu pela resposta!
Eu vou fazer os testes aqui e dou um reply pra você, abraço!

#9