display: contents;
на помощь!
Kinda.
В зависимости от вашей поддержки браузера и / или требований доступности , мы можем достичьэффект, который вы хотите, используя общую структуру, которую вы имеете, с относительно новым display: contents
свойством .
Описать display: contents
довольно сложно, поэтому я укажу на эту замечательную статью CSS Tricks .
Чтобы использовать ее, мы обернем каждую группу <span>
элементов подряд в <div>
с display: contents
.Это позволяет нам нацеливаться на элементы div:hover > span
и применять цвет фона.
Было несколько других небольших изменений, необходимых для вашего стиля, например, чтобы элементы <span>
заполняли доступную ширину.Вот рабочий пример:
.parent {
display: grid;
box-sizing: border-box;
width: 100%;
border: 1px solid #dbeaf4;
grid-template-columns: repeat(4, minmax(15%, max-content));
padding: 5px 0;
}
.parent span {
padding: 5px;
border-bottom: 1px solid #dbeaf4;
}
.row {
display: contents;
}
.row:hover span {
background-color: #dbeaf4;
cursor: pointer;
}
<div class="parent">
<div class="row">
<span>1</span>
<span>2</span>
<span>3</span>
<span>Knowledge process outsourcing land the plane yet to be inspired is to become creative, innovative and energized we want this</span>
</div>
<div class="row">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="row">
<span>We need to socialize the comms with the wider stakeholder community</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="row">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<div class="row">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</div>
с компонентами React и Styled
Теперь, когда у нас работает CSS, мы можем поместить его обратно встилизованная-компонента.Основное изменение, которое я внес в ваш код, - это использование компонента <LineUI />
для переноса каждой строки вместе с новым CSS сверху.
const titles = [
"Id",
"Type",
"Name",
"Category",
"Client",
"Date",
"Watched",
"Amount",
"State",
"Delete"
];
const data = [
{
id: 23,
type: "test",
name: "joaaaahnny cageasdasdasd cageasdasdasd cageasdasdasd cageasdasdasd",
category: "selasdasler",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 211,
type: "test",
name: "johnny cage",
category: "seller",
client: "custsdsom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
},
{
id: 2222,
type: "test",
name: "johnny cage",
category: "seller",
client: "custom",
date: "01-01-2019",
watched: "yes",
amount: 1231,
state: "pending",
delete: "button"
}
];
const TableWrapperUI = styled.div`
display: grid;
box-sizing: border-box;
width: 100%;
border: 1px solid #dbeaf4;
grid-template-columns: repeat(
${props => props.columns && props.columns},
minmax(auto, max-content)
);
padding: 5px;
> * {
padding: 5px;
}
`;
const LineUI = styled.div`
display: contents;
> * {
padding: 5px;
border-bottom: 1px solid #dbeaf4;
}
:hover > * {
background-color: #dbeaf4;
cursor: pointer;
overflow: visible;
}
`;
const Table = ({ children, titles, data }) => {
const [amountColumns, setAmountColumns] = React.useState(0);
React.useEffect(() => {
setAmountColumns(titles.length);
}, []);
const displayData = data => {
return data.map((x, idx) => {
return (
<React.Fragment key={idx}>
<LineUI>
{Object.keys(x).map((value, ids) => (
<span key={ids}>{x[value]}</span>
))}
</LineUI>
</React.Fragment>
);
});
};
const displayTitles = titles => {
return titles.map((title, idx) => {
return <span key={idx}>{title}</span>;
});
};
return (
amountColumns > 0 && (
<TableWrapperUI columns={amountColumns}>
{displayTitles(titles)}
{displayData(data)}
</TableWrapperUI>
)
);
};
function App() {
return (
<div className="App">
<Table columns={10} titles={titles} data={data} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.3.2/styled-components.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<div id="root"></div>