Css não aplica em datatable

Front-end
#1

Oi!

O problema é que o meu css não se aplica ao datatable (simplesmente ignora que eu coloquei lá) e eu queria saber o que eu fiz de errado… O css esta em: WebContent/css/tabela.css E na minha página esta assim (acho melhor colocar a página inteira):

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel=?stylesheet? type=?text/css? href=?WebContent/css/tabela.css? />
<title>Lista dos projetos</title>
</head>

<body>
<f:view>
	<h:form>
		<h:outputText value="Timesheet:"></h:outputText>
		<h:dataTable value="#{timesheetBean.timesheet.projetos}" var="projeto"
			binding="#{timesheetBean.dataTable}" styleClass="tabela" headerClass="cabecalho" columnClasses="ultimo.primeiro">
			<h:column>
				<f:facet name="header">
					<h:outputText value="Projeto"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.nome}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Domingo"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.horaDom}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Segunda"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.horaSeg}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Terca"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.horaTer}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Quarta"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.horaQua}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Quinta"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.horaQui}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Sexta"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.horaSex}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Sabado"></h:outputText>
				</f:facet>
				<h:outputText value="#{projeto.horaSab}"></h:outputText>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Edita"></h:outputText>
				</f:facet>
				<h:commandButton value="v" action="#{timesheetBean.editaProjeto}"></h:commandButton>
			</h:column>
			<h:column>
				<f:facet name="header">
					<h:outputText value="Deleta"></h:outputText>
				</f:facet>
				<h:commandButton value="x" action="#{timesheetBean.deleteProjeto}"></h:commandButton>
			</h:column>
		</h:dataTable>
		<h:panelGrid columns="2" rendered="#{timesheetBean.edit}">
			<h:outputText
				value="Edita o projeto: #{timesheetBean.projetoSelecionado.nome}"></h:outputText>
			<h:outputText />
			<h:outputText value="Segunda: "></h:outputText>
			<h:inputText value="#{timesheetBean.projetoSelecionado.horaSeg}"></h:inputText>
			<h:outputText value="Terca: "></h:outputText>
			<h:inputText value="#{timesheetBean.projetoSelecionado.horaTer}"></h:inputText>
			<h:outputText value="Quarta: "></h:outputText>
			<h:inputText value="#{timesheetBean.projetoSelecionado.horaQua}"></h:inputText>
			<h:outputText value="Quinta: "></h:outputText>
			<h:inputText value="#{timesheetBean.projetoSelecionado.horaQui}"></h:inputText>
			<h:outputText value="Sexta: "></h:outputText>
			<h:inputText value="#{timesheetBean.projetoSelecionado.horaSex}"></h:inputText>
			<h:outputText value="Sabado: "></h:outputText>
			<h:inputText value="#{timesheetBean.projetoSelecionado.horaSab}"></h:inputText>
			<h:outputText value="Domingo: "></h:outputText>
			<h:inputText value="#{timesheetBean.projetoSelecionado.horaDom}"></h:inputText>
			<h:outputText />
			<h:panelGroup>
				<h:commandButton value="Salvar" action="#{timesheetBean.salvar}"></h:commandButton>
			</h:panelGroup>
		</h:panelGrid>
		<h:commandButton value="Adicionar Projeto"
			action="#{timesheetBean.adicionarProjeto}"></h:commandButton>

	</h:form>
</f:view>
</body>

</html>

Obrigada ; )
Ariane.

#2

Olá Ariane tudo bem?

por acaso você testou esse estilo fora da tabela pra ver se realmente está funcionado?

Caso sim, procure colocar a sua classe CSS na propriedade “rowClasses”, possivelmente estará funcionando :slight_smile:

Dependendo do estilo ele pode ter comportamentos “diferentes” e não se comportar como realmente desejamos

no mais, tenha um bom dia :slight_smile:

#3

Colocando o caminho do CSS no browser vc consegue abri-lo? Achei estranho o caminho WebContent no seu arquivo. Uma coisa que voce pode fazer na sua aplicação, é usar a tag c:url pra gerar o caminho do CSS a ser renderizado.

#4

Eu não sabia aonde colocar, onde você acha?

#5

não… A verdade é que eu nunca fiz isso, segui um tutorial e no tutorial não especificava aonde colocar o .css (http://evandropaes.wordpress.com/2007/05/11/integrando-jsf-e-css-%E2%80%93-aplicando-estilos-ao-datatable/)

#6

Eu coloquei assim e funcionou:

<link rel="stylesheet" type="text/css" href='<%= request.getContextPath() + "/css/tabela.css" %>'>

Mas não redenriza os estilos das colunas, eu tentei colocar assim (rowClasses no lugar de columnClasses):

<h:dataTable value="#{timesheetBean.timesheet.projetos}" var="projeto"
			binding="#{timesheetBean.dataTable}" styleClass="tabela" headerClass="cabecalho" 
			rowClasses="ultimo.primeiro">

mas continua não renderizando.

#7